javascript怎么实现轮播图效果

本篇内容主要讲解“javascript怎么实现轮播图效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“javascript怎么实现轮播图效果”吧!

本文实例为大家分享了javascript实现花样轮播效果的两种实现方法，供大家参考，具体内容如下

第一种：简单的带按钮的轮播

介绍：左右按钮控制轮播，点击左按钮切换上一张图片，点击右按钮切换下一张

html如下：

<div class="box">         <div class="imgbox">             <a><img src="img/banner1.jpg" alt=""></a>             <a><img src="img/banner2.jpg" alt=""></a>             <a><img src="img/banner3.jpg" alt=""></a>             <a><img src="img/banner4.jpg" alt=""></a>             <a><img src="img/banner5.jpg" alt=""></a>         </div>         <div class="btns">             <input type="button" id="left" value="<<<">             <input type="button" id="right" value=">>>"> </div>

css如下：

.box{width: 1000px;height: 300px;margin: 20px auto;position: relative;overflow: hidden;}         .box .imgbox{}         .imgbox a{width: 1000px;height: 300px;position: absolute;left:1000px;top:0;}         .imgbox a:nth-child(1){left:0;}         .imgbox img{width: 1000px;height: 300px;}         .btns input{width: 40px;height: 40px;position: absolute;top:130px;border: none;background: rgba(200,200,200,0.5);}         #left{left:0;}         #right{right: 0;}}

js如下：

class Banner{         constructor(){             this.left = document.getElementById("left");             this.right = document.getElementById("right");             this.child = document.querySelectorAll(".imgbox a");             // 要进来的             this.iNow = 0;             // 要走的             this.iPrev = this.child.length - 1;         }         init(){             var that = this;             this.left.addEventListener("click",function(){                 that.changeIndex(1);             })             this.right.addEventListener("click",function(){                 that.changeIndex(2);             })         }         changeIndex(direct){             if(direct == 1){                 if(this.iNow == 0){                     this.iNow = this.child.length-1;                     this.iPrev = 0;                 }else{                     this.iNow--;                     this.iPrev = this.iNow + 1;                 }             }else{                 if(this.iNow == this.child.length-1){                     this.iNow = 0;                     this.iPrev = this.child.length-1;                 }else{                     this.iNow++;                     // 要走的索引永远是进来的索引-1                     this.iPrev = this.iNow - 1;                 }             }             // 根据索引开始运动             this.move(direct);         }         move(direct){             if(direct == 1){                 // iPrev走                     // 从0，走到1000                 this.child[this.iPrev].style.left = 0;                 move(this.child[this.iPrev],{left:1000});                 // iNow进来                     // 从-1000，进到0                 this.child[this.iNow].style.left = -1000 + "px";                 move(this.child[this.iNow],{left:0});             }else{                                  this.child[this.iPrev].style.left = 0;                 move(this.child[this.iPrev],{left:-1000});                 this.child[this.iNow].style.left = 1000 + "px";                 move(this.child[this.iNow],{left:0});             }         }     } var b = new Banner(); b.init();

第二种：自动轮播

介绍：两个左右按钮可以控制图片左右切换，下面带有数字的按钮，点击数字几，就可以切换到第几张，自动轮播的过程中，鼠标进入停止轮播，鼠标离开继续轮播

htm代码如下：

<div class="box">         <div class="imgbox">             <a><img src="../img/banner1.jpg" alt=""></a>             <a><img src="../img/banner2.jpg" alt=""></a>             <a><img src="../img/banner3.jpg" alt=""></a>             <a><img src="../img/banner4.jpg" alt=""></a>             <a><img src="../img/banner5.jpg" alt=""></a>         </div>         <div class="btns">             <input type="button" id="left" value="<<<">             <input type="button" id="right" value=">>>">         </div>         <div class="list">         </div> </div>

css代码如下：

.box{width: 1000px;height: 300px;margin: 20px auto;position: relative;overflow: hidden;} .box .imgbox{} .imgbox a{width: 1000px;height: 300px;position: absolute;left:1000px;top:0;} .imgbox a:nth-child(1){left:0;} .imgbox img{width: 1000px;height: 300px;} .btns input{width: 40px;height: 40px;position: absolute;top:130px;border: none;background: rgba(200,200,200,0.5);}         #left{left:0;}         #right{right: 0;} .list{width: 1000px;height: 30px;position: absolute;left: 0;bottom: 0;display: flex;background: rgba(200,200,200,0.5);} .list span{flex: 1;line-height: 30px;text-align: center;border-left:solid 1px black;border-right: solid 1px black;} .list span.active{background: red;color: #fff;}

js代码如下：

class Banner{         constructor(){             this.left = document.getElementById("left");             this.right = document.getElementById("right");             this.child = document.querySelectorAll(".imgbox a");             this.list = document.querySelector(".list");             this.box = document.querySelector(".box");             this.iNow = 0;             this.iPrev = this.child.length - 1;         }         init(){             var that = this;             this.left.addEventListener("click",function(){                 that.changeIndex(1);             })             this.right.addEventListener("click",function(){                 that.changeIndex(-1);             })             // L3.事件委托绑定事件             this.list.onclick = function(eve){                 var e = eve || window.event;                 var tar = e.target || e.srcElement;                 if(tar.tagName == "SPAN"){                     // L4.触发事件时，执行改变索引，同时将点前点击的span传入                     that.listChangeIndex(tar);                 }             }         }         changeIndex(direct){             if(direct == 1){                 if(this.iNow == 0){                     this.iNow = this.child.length-1;                     this.iPrev = 0;                 }else{                     this.iNow--;                     this.iPrev = this.iNow + 1;                 }             }else{                 if(this.iNow == this.child.length-1){                     this.iNow = 0;                     this.iPrev = this.child.length-1;                 }else{                     this.iNow++;                     this.iPrev = this.iNow - 1;                 }             }             this.move(direct);         }         move(direct){             // 根据左右按钮传入的状态：左1，右-1             // 利用乘法             // 改变不同按钮的方向问题             this.child[this.iPrev].style.left = 0;             move(this.child[this.iPrev],{left:this.child[0].offsetWidth * direct});             this.child[this.iNow].style.left = -this.child[0].offsetWidth * direct + "px";             move(this.child[this.iNow],{left:0});             this.setActive();         }         createList(){             // L1.创建对应图片数量的span，同时编号             var str = ``;             for(var i=0;i<this.child.length;i++){                 str += `<span index='${i}'>${i+1}</span>`;             }             this.list.innerHTML = str;             // L2.设置默认的当前项             this.setActive();         }         setActive(){             for(var i=0;i<this.list.children.length;i++){                 this.list.children[i].className = "";             }             this.list.children[this.iNow].className = "active";         }         listChangeIndex(tar){             // L5.确定要走的索引和要进来的索引             // this.iNow    要走的             // 拿到点击的span的编号     要进来的             var index = parseInt(tar.getAttribute("index"));             // console.log(this.iNow, index);             // L6-1.判断方向             if(index > this.iNow){                 // L7-1.向左运动                 this.listMove(1,index);             }             // L6-2.判断方向             if(index < this.iNow){                 // L7-2.向右运动                 this.listMove(-1,index);             }             // L8.将当前点击的索引设置成下次要走的索引             this.iNow = index;             // L9.根据修改之后的索引，设置当前项             this.setActive();         }         listMove(direct,index){             // this.iNow走                 // 从哪走，走到哪             this.child[this.iNow].style.left = 0;             move(this.child[this.iNow],{left:-1000 * direct})             // index进来                 // 从哪进来，进到哪s             this.child[index].style.left = 1000 * direct + "px";             move(this.child[index],{left:0});         }         autoPlay(){             var t = setInterval(()=>{                 this.changeIndex(-1);             },2000)             this.box.onmouseover = function(){                 clearInterval(t);             }             var that = this;             this.box.onmouseout = function(){                 t = setInterval(()=>{                     that.changeIndex(-1);                 },2000)             }                          // console.log(that);         }     } var b = new Banner(); b.init(); b.createList(); b.autoPlay();

两个案例 js 里面的move是一个缓冲运动的封装，代码如下：

function move(ele,obj,cb){     clearInterval(ele.t);     ele.t = setInterval(() => {         // 假设状态为：可以清除计时器         var i = true;         // 因为在计时器中才开始使用到对象中的信息，所以在计时器中遍历         // 并提前换来的属性和目标变量         for(var attr in obj){             if(attr == "opacity"){                 var iNow = getStyle(ele,attr) * 100;             }else{                 var iNow = parseInt(getStyle(ele,attr));             }                  let speed = (obj[attr] - iNow)/10;             speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);             // 只要有一个属性到目标，就停了，不对             // 必须所有属性到目标，才能停             // 只要有一个属性没到目标，绝对不能停                 // 用状态来标记到底要不要停止计时器             // 只要有一个属性没到目标：绝对不能清除计时器             if(iNow !== obj[attr]){                 i = false;             }             if(attr == "opacity"){                 ele.style.opacity = (iNow + speed)/100;             }else{                 ele.style[attr] = iNow + speed + "px";             }         }         // 如果每次计时器执行结束，所有属性都执行了一遍之后，状态还是true，表示，没有被改成false，如果没有被改成false，表示没有属性没到终点，那么状态还是false就不清除         if(i){             clearInterval(ele.t);             // 用户决定在动画结束时要执行的功能，万一用户没传参，做个默认判断             if(cb){                 cb();             }             // cb && cb();         }     }, 30); } function getStyle(ele,attr){     if(ele.currentStyle){         return ele.currentStyle[attr];     }else{         return getComputedStyle(ele,false)[attr];     } }

到此，相信大家对“javascript怎么实现轮播图效果”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！