【原生js】详解轮播图之无缝滚动

来源：互联网发布：魔兽60年代数据库编辑：程序博客网时间：2024/05/29 03:52

前言：轮播图，是网站首页中最常见的一种图片切换特效，作为前端开发者，我相信很多开发者都直接调用了JQuery中的封装好的方法实现图片轮播，省事简单。所以我今天想介绍一下原生js代码实现的图片轮播。

结构部分

html部分

<body>    <!--展示窗口-->  <div class="show_box">    <!--轮播图图片-->    <div class="pic_box">      <div class="pic">        <img src="images/1.jpg" alt=""/>      </div>      <div class="pic">        <img src="images/2.jpg" alt=""/>      </div>      <div class="pic">        <img src="images/3.jpg" alt=""/>      </div>      <div class="pic">        <img src="images/4.jpg" alt=""/>      </div>      <div class="pic">        <img src="images/5.jpg" alt=""/>      </div>      <div class="pic">        <img src="images/6.jpg" alt=""/>      </div>      <div class="pic">        <img src="images/1.jpg" alt=""/>      </div>      <div class="pic">        <img src="images/2.jpg" alt=""/>      </div>      <div class="pic">        <img src="images/3.jpg" alt=""/>      </div>    </div>    <!-- 轮播左侧按钮-->    <div class="leftBtn btn">&lt;</div>    <!-- 轮播右侧按钮-->    <div class="rightBtn btn">&gt;</div>  </div></body>

css部分

<style>    * {      margin: 0;      padding: 0;    }    .show_box {      margin: 100px auto;      height: 300px;      width: 900px;      position: relative;      border: 10px dotted blue;      overflow: hidden;    }    .pic_box {      position: absolute;      width: 3600px;    }    .pic {      float: left;    }    .leftBtn,.rightBtn {      width: 50px;      height: 50px;      border-radius: 25px;      background-color: #333;      position: absolute;      text-align: center;      line-height: 50px;      color: #fff;      font-size: 25px;      top: 50%;      margin-top: -25px;      cursor: pointer;    }    .leftBtn {      left: 10px;    }    .rightBtn {      right: 10px;    }  </style>

注：图片宽高都为300px
结构很简单，一个展示图片的大盒子(相对定位，设置overflow:hidden)，里面放存放图片的大盒子(绝对定位)，再里面：图片盒子左浮动，为了实现无缝轮播的效果，这里将前三个图片复制一份加到最后一个图片的后面。结构部分不设置溢出隐藏效果如下图:
点虚线内的为显示盒子
js部分：
先传入上次教程封装好的动画函数

function getStyleValue(node,attr){  var styleNode;  if(node.currentStyle==undefined){    styleNode = getComputedStyle(node,null);  }else{    styleNode = node.currentStyle;  }  return styleNode[attr];}function animate(node,obj,speed,fn){  clearInterval(node.num);  node.num = setInterval(function(){    var flag = true;    for(var key in obj){      var v = parseInt(getStyleValue(node,key));      if(v!=obj[key]){        flag = false;      }      var step = (obj[key]-v)/20;      if(step>0){        step = Math.ceil(step);      }else if(step<0){        step = Math.floor(step);      }      var v2 = v + step;      node.style[key] = v2 + 'px';    }    if(flag){      clearInterval(node.num);      if(fn!=undefined){        fn();      }    }  },speed);}

右按钮

这里写图片描述
尾部无缝原理图解

  //用全局变量index接收当前的下标，后期如需做分页器更方便使用。    var index = 0;    //lock开关锁思想： 防止用户快速点击按钮，出现动画未结束就进行下一个动画，以致轮播出现混乱。    var lock = true;    rightBtnNode.onclick = function(){      if(lock){        lock = false;        index++;        var targetValue = index * -300;        //用第三方变量temp接收index的值        var temp = index;        if(index==6){          index = 0;        }        animate(pic_boxNode,{left:targetValue},10,function(){          if(temp==6){            //判断：当图片动画运动到最后尾部的时候，立马将图片不以动画的方式(闪现到开始位置。)            pic_boxNode.style.left = 0 + 'px';          }          //最后一步：将lock赋值true；将锁打开          lock = true;        });      }    };

左按钮
这里写图片描述

leftBtnNode.onclick = function(){      if(lock){        lock = false;        index--;        if(index<0){          index = 5;          //判断：当图片动画运动到最后头部开始位置的时候，立马将图片不以动画的方式(闪现到尾部最后的位置。)          pic_boxNode.style.left = 6 * -300 + 'px';        }        var targetValue = index * -300;        var temp = index;        animate(pic_boxNode,{left:targetValue},10,function(){          lock = true;        });      }    };

自动轮播功能实现

//下面为鼠标进出显示盒子设置是否自动播放    show_boxNode.onmouseenter = function(){      clearInterval(flag)    };    show_boxNode.onmouseleave = function(){      autoPlay();    };    var flag;    function autoPlay(){      flag = setInterval(function(){        rightBtnNode.onclick();      },2000);    }    autoPlay();

总结
就这样一个简单的无缝滚动就这样实现了！
主要逻辑点：无缝滚动的原理，①结构处负责前几个图片到尾部②轮播到首尾部时的闪现和动画函数的处理。
以上就是这篇文章的所有内容了，希望本文对大家的学习或工作上能带来一点帮助，如果有疑问，大家可以留言交流；小编水平有限，还请各位同行前辈多多斧正。

阅读全文

1 0