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];
   }
}

来源：https://blog.csdn.net/qq_46065861/article/details/120102386