轮播那套
html
<div class="banner"> <div class="lunbo" id="box"> <div id="prev" class="prev"><svg t="1590475338509" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2799" width="40" height="40"><path d="M254.89 512l448-448 60.417 60.33-448 448L254.89 512z m60.843-60.757l453.291 453.376-60.33 60.33-453.377-453.376 60.416-60.33z" p-id="2800" fill="#e6e6e6"></path></svg></div> <div id="next" class="next"><svg t="1590475430357" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3162" width="40" height="40"><path d="M769.11 512l-448 448-60.417-60.33 448-448L769.11 512z m-60.843 60.757l-453.291-453.376 60.33-60.33 453.377 453.376-60.416 60.33z" p-id="3163" fill="#e6e6e6"></path></svg></div> <ul> <li> <img src="img/banner1.jpg" > </li> <li> <img src="img/banner2.jpg" > </li> <li> <img src="img/banner3.jpg" > </li> <li> <img src="img/banner1.jpg" > </li> </ul> <ol> <li class="current"></li> <li></li><li></li> </ol> </div> </div>
css
.banner{ text-align: center; position: relative; height: 300px; overflow: hidden; } .banner ul{ width: 400%; position: absolute; display: flex; } .banner ul li{ list-style: none; width: 100%; } ol{ position: absolute; z-index: 10; bottom: 10px; left: 0; right: 0; margin: 0 auto; } ol li{ display: inline-block; width: 20px; height: 20px; background-color: #003D85; margin: 0 10px; border-radius: 100px; } ol li.current{ background-color: #269D01; } .banner img{ width: 100%; height: 300px; } #prev,#next{ position: absolute; z-index: 100; top: 46%; background-color: #999999; border-radius: 100%; padding: 5px; } #prev{ left: 20px; } #next{ right:20px; }
js
var screen=document.getElementsByClassName("lunbo")[0]; //轮播图显示区域div var ul=document.querySelector('.lunbo ul'); //显示图片的ul var ol=document.getElementsByTagName("ol")[0]; //显示页码的ol var left=document.getElementById("prev"); //上一张箭头 var right=document.getElementById("next"); //下一张箭头 var index=0; ////声明一个变量记录图片的索引，默认第0张图片 //2.给box添加鼠标移入和移出事件 //2.1 鼠标移入 /* box.onmouseover= function () { arr.style.display="block"; //显示上一页下一页箭头 clearInterval(timeId); //清除定时器（即鼠标移入时，图片要停止自动轮播） }; //2.2 鼠标移出 box.onmouseout= function () { arr.style.display="none"; //隐藏箭头 timeId=setInterval(scroll,2000); //重启定时器（鼠标移出，图片要恢复自动轮播） }; */ //3.给上一页下一页箭头添加点击事件 //3.1 下一页，图片向左轮播 right.onclick= function () { scroll(); }; //3.2 上一页，图片向右轮播 left.onclick= function () { //(1)边界检测，如果当前已经是第一张，则不做任何处理 if(index==0){ //无限轮播原理：如果当前是第一张，则偷偷修改ul的位置是最后一张(第一张与最后一张是同一张图片) index=ul.children.length-1; //index恢复到最后一张 ul.style.left=-index*screen.offsetWidth+"px"; ////ul回到最后一张位置 } //(2)索引自减 index--; // (3)向左移动ul：目标距离 = -screen的宽度 * 索引 animationMove(ul,-index*screen.offsetWidth,10); indexShow(); //同步页码样式 }; //4.给页码添加点击事件 for(var i=0;i<ol.children.length;i++){ //4.1 循环遍历数组时给每一个页码添加一个liIndex属性记录下标 ol.children[i].liIndex=i; ol.children[i].onclick= function () { index=this.liIndex-1; scroll(); }; } var timeId=setInterval(scroll,3000); // 封装一个向右轮播的函数 function scroll(){ //（1）边界检测：如果当前已经是最后一张(第n+1张,n代表需要轮播的图片数量) if(index==ul.children.length-1){ //无限轮播的原理就是滚动到最后一张的时候，偷偷快速的改变ul的位置到第一张(不要任何动画，一瞬间改变) index=0; //index恢复到0 ul.style.left=0+"px"; //ul回到初始位置 } // (2)索引自增 index++; // (3)向右移动ul：目标距离 = -screen的宽度 * 索引 animationMove(ul,-index*screen.offsetWidth,10); indexShow(); //同步页码样式 } //5.页码样式保持同步：排他思想(当前页码添加样式，其他页码移除该样式) function indexShow(){ for(var i=0;i<ol.children.length;i++){ if(i==index){ ol.children[i].classList.add("current"); }else{ ol.children[i].classList.remove("current"); } //特殊情况：当index为最后一张的时候，页码应该显示第一张 if(index==ul.children.length-1){ ol.children[0].classList.add("current"); } } } // 封装一个滚动动画函数 function animationMove(obj,target,speed){ clearInterval(obj.timeId); //每次执行动画先清除原有的定时器 obj.timeId=setInterval(function () { var currentLeft=obj.offsetLeft; //获取当前位置 var isLeft=currentLeft>target?true:false; //是否往左走 if(isLeft){ currentLeft-=10; //往左走 }else{ currentLeft+=10; //往右走 } if(isLeft?currentLeft>target:currentLeft<target){ obj.style.left=currentLeft+"px"; //如果当前位置不是在目标位置则进行位置处理 }else{ clearInterval(obj.timeId); obj.style.left=target+"px"; } },speed); }
面向对象版改：
function Carousel(id){ this.screen=document.getElementsByClassName(id)[0], //轮播图显示区域div this.ul=document.querySelector('.'+id+' ul'), //显示图片的ul this.ol=document.querySelector('.'+id+" ol"), //显示页码的ol this.left=document.querySelector('.'+id+" .prev"), //上一张箭头 this.right=document.querySelector('.'+id+" .next"), //下一张箭头 this.index=0, ////声明一个变量记录图片的索引，默认第0张图片 this.timeId="", this.ultimer="", this.isLeft="", this.ulleft='', this.right.onclick=function(){ this.scroll(); console.log(this.right); }.bind(this); this.left.onclick=function(){ //(1)边界检测，如果当前已经是第一张，则不做任何处理 if(this.index==0){ //无限轮播原理：如果当前是第一张，则偷偷修改ul的位置是最后一张(第一张与最后一张是同一张图片) this.index=this.ul.children.length-1; //index恢复到最后一张 this.ul.style.left=-this.index*this.screen.offsetWidth+"px"; ////ul回到最后一张位置 } //(2)索引自减 this.index--; // (3)向左移动ul：目标距离 = -screen的宽度 * 索引 this.animationMove(this.ul,-this.index*this.screen.offsetWidth,10); this.indexShow(); //同步页码样式 }.bind(this);
var that=this;
this.screen.addEventListener('mouseenter',function(){
console.log('ent')
that.stop()
})
this.screen.addEventListener('mouseleave',function(){
console.log('lev')
that.start()
})
} Carousel.prototype.cliol=function(){
for(var i=0;i<this.ol.children.length;i++){ //4.1 循环遍历数组时给每一个页码添加一个liIndex属性记录下标 this.ol.children[i].liIndex=i; var that=this; this.ol.children[i].onclick= function () { that.index= this.liIndex-1; that.scroll(); }; }
} Carousel.prototype.scroll=function(){ //（1）边界检测：如果当前已经是最后一张(第n+1张,n代表需要轮播的图片数量) console.log(this) if(this.index==this.ul.children.length-1){ //无限轮播的原理就是滚动到最后一张的时候，偷偷快速的改变ul的位置到第一张(不要任何动画，一瞬间改变) this.index=0; //index恢复到0 this.ul.style.left=0+"px"; //ul回到初始位置 } console.log(this) // (2)索引自增 this.index++; // (3)向右移动ul：目标距离 = -screen的宽度 * 索引 this.animationMove(this.ul,-this.index*this.screen.offsetWidth,10); this.indexShow(); //同步页码样式 } Carousel.prototype.indexShow=function(){ console.log(this) for(var i=0;i<this.ol.children.length;i++){ if(i==this.index){ this.ol.children[i].classList.add("current"); }else{ this.ol.children[i].classList.remove("current"); } //特殊情况：当index为最后一张的时候，页码应该显示第一张 if(this.index==this.ul.children.length-1){ this.ol.children[0].classList.add("current"); } } } // 封装一个滚动动画函数 Carousel.prototype.animationMove=function(obj,target,speed){ var c=-this.index*this.screen.offsetWidth; console.log("ani"); console.log(this.ultimer); clearInterval(this.ultimer); //每次执行动画先清除原有的定时器 this.ultimer=setInterval(function () { this.ulleft=this.ul.offsetLeft; //获取当前位置 this.isLeft=this.ul.offsetLeft>c?true:false; //是否往左走 if(this.isLeft){ this.ulleft-=10; //往左走 }else{ this.ulleft+=10; //往右走 } if(this.isLeft?this.ulleft>c:this.ulleft<c){ this.ul.style.left=this.ulleft+"px"; //如果当前位置不是在目标位置则进行位置处理 }else{ clearInterval(this.ultimer); this.ul.style.left=c+"px"; } }.bind(this),speed); } Carousel.prototype.init=function(){ var that=this; this.timeId=setInterval(this.scroll.bind(this),5000); this.cliol(); }
Carousel.prototype.stop=function(){
clearInterval(this.timeId)
}
Carousel.prototype.start=function(){
clearInterval(this.timeId)
this.timeId=setInterval(this.scroll.bind(this),5000);
}
创建实例,注.lunbo可替换，结构如上面html中的代码
var car1=new Carousel('lunbo'); car1.init();
