js如何实现横向轮播图

互联网 20-3-6

描述：

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

/* * 工厂模式 * */    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;  }  } })();

（推荐学习：js教程）

<!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>

更多编程相关内容，请关注php中文网编程入门栏目！

以上就是js如何实现横向轮播图的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：轮播图