JS实现横向轮播图(初级版)


Posted in Javascript onJune 24, 2020

本文实例为大家分享了JS实现横向轮播图的具体代码,供大家参考,具体内容如下

描述:

轮播图,初级,横向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),核心知识是数据驱动图像的位移达到效果。

效果:

JS实现横向轮播图(初级版)

代码:

js文件:

/*
* 工厂模式
* */
 
var Method=(function () {
 return {
 loadImage:function (arr,callback) {
 var img=new Image();
 img.arr=arr;
 img.list=[];
 img.num=0;
 img.callback=callback;
// 如果DOM对象下的事件侦听没有被删除掉,将会常驻堆中
// 一旦触发了这个事件需要的条件,就会继续执行事件函数
 img.addEventListener("load",this.loadHandler);
 img.self=this;
 img.src=arr[img.num];
 },
 
 loadHandler:function (e) {
 this.list.push(this.cloneNode(false));
 this.num++;
 if(this.num>this.arr.length-1){
 this.removeEventListener("load",this.self.loadHandler);
 this.callback(this.list);
 return;
 }
 this.src=this.arr[this.num];
 },
 
 $c:function (type,parent,style) {
 var elem=document.createElement(type);
 if(parent) parent.appendChild(elem);
 for(var key in style){
 elem.style[key]=style[key];
 }
 return elem;
 }
 }
})();

html文件:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 *{
 margin: 0;
 padding: 0;
 }
 #carousel,#imgCon img{
 width: 1200px;
 height: 400px;
 }
 #carousel
 {
 position: relative;
 margin: auto;
 overflow: hidden;
 }
 #imgCon{
 width: 6000px;
 height: 400px;
 position: absolute;
 left: 0;
 font-size: 0;
 transition: all 1s;
 }
 #leftBn,#rightBn
 {
 position: absolute;
 top:170px;
 }
 #leftBn{
 left: 20px;
 }
 #rightBn
 {
 right: 20px;
 }
 ul{
 position: absolute;
 bottom: 20px;
 list-style: none;
 margin: auto;
 left: 45%;
 }
 li
 {
 width: 20px;
 height: 20px;
 border: 1px solid red;
 border-radius: 10px;
 float: left;
 text-align: center;
 color: white;
 cursor: default;
 line-height:20px;
 font-size: 12px;
 margin-left: 8px;
 }
 </style>
</head>
<body>
 <div id="carousel">
 <div id="imgCon">
 <img src="img/a.jpeg">
 <img src="img/b.jpeg">
 <img src="img/c.jpeg">
 <img src="img/d.jpeg">
 <img src="img/e.jpeg">
 </div>
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 </ul>
 <img src="img/left.png" id="leftBn">
 <img src="img/right.png" id="rightBn">
 </div>
<script>
 /*
 *
 * 数据驱动显示
 *
 * */
 var imgCon,leftBn,rightBn,lis,ul,prevLi;
 var position=0;//图像的标记 第一张0 第二张1...
 init();
 function init() {
 imgCon=document.getElementById("imgCon");//图
 leftBn=document.getElementById("leftBn");//左按钮
 rightBn=document.getElementById("rightBn");//右按钮
 lis=document.getElementsByTagName("li");//下方数字右按钮
 ul=document.getElementsByTagName("ul")[0];
 leftBn.addEventListener("click",clickHandler);
 rightBn.addEventListener("click",clickHandler);
 for(var i=0;i<lis.length;i++){//为每隔小Li 也就是底部数字赋值
 lis[i].num=i;
 lis[i].addEventListener("click",liClickHandler);
 }
 changeLi();
 }
 
// setInterval(autoImg,3000);可以实现自动
 
 function autoImg() {//自动轮播
 position++;
 if(position>4) position=0;
 changeImg();
 }
 
 function clickHandler(e) {
 e= e || window.event;
 if(this===leftBn){
 position--;
 if(position<0) position=4;
 }else if(this===rightBn){
 position++;
 if(position>4) position=0;
 }
 changeImg();
 }
 
 function liClickHandler(e) {
 e= e || window.event;
 position=this.num;
 changeImg();
 }
 function changeImg() {//图片的转换效果 唯一
 imgCon.style.left=-position*1200+"px";//一次一张图片的位移
 changeLi();
 }
 
 function changeLi() {//底部数字的转换效果
 if(prevLi){
 prevLi.style.backgroundColor="rgba(255,0,0,0)";
 }
 prevLi=lis[position];
 prevLi.style.backgroundColor="rgba(255,0,0,0.5)";
 }
</script>
</body>
</html>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
javascript面向对象编程代码
Dec 19 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
如何解决vue与传统jquery插件冲突
Mar 20 Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 Javascript
详解Vue依赖收集引发的问题
Apr 22 Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 Javascript
Element Steps步骤条的使用方法
Jul 26 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 #Javascript
微信小程序开发中var that =this的用法详解
Jan 18 #Javascript
JavaScript实现滑动门效果
Jan 18 #Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 #Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 #Javascript
JS数组方法join()用法实例分析
Jan 18 #Javascript
JavaScript进制转换实现方法解析
Jan 18 #Javascript
You might like
初识laravel5
2015/03/02 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
php操作redis缓存方法分享
2015/06/03 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
JavaScript关于select的相关操作说明
2010/01/13 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
微信小程序自定义组件components(代码详解)
2019/10/21 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
python3正则提取字符串里的中文实例
2019/01/31 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
广告学毕业生求职信
2014/01/30 职场文书
生日宴会主持词
2014/03/20 职场文书
客房部经理岗位职责
2015/02/02 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
解决mysql的int型主键自增问题
2021/07/15 MySQL
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis