JavaScript实现简易轮播图最全代码解析(ES5)

程序员文章站 2022-07-02 22:24:38

本文实例为大家分享了javascript实现简易轮播图效果的具体代码，供大家参考，具体内容如下全部代码： ...

本文实例为大家分享了javascript实现简易轮播图效果的具体代码，供大家参考，具体内容如下

全部代码：

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>es5轮播图</title>
  <style>
   * {padding: 0;margin: 0;}
   #wrapper {
    position: relative;
    margin: 50px auto;
    padding: 0;
    width: 1000px;
    height: 300px;
   }
   #wrapper .content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
   }
   #wrapper>.content>.imgs {
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    width: 6000px;
    /*多留出一张图片的宽度！*/
    list-style: none;
   }
   #wrapper>.content>.imgs li {
    float: left;
    margin: 0;
    padding: 0;
    width: 1000px;
    height: 300px;
   }
   #wrapper>.content>.imgs>li img {
    width: 100%;
    height: 100%;
   }
   #wrapper>.content>.dots {
    width: 163px;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    bottom: 10px;
    list-style: none;
   }
   #wrapper>.content>.dots li {
    float: left;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    margin-left: 10px;
    cursor: pointer;
   }
   li.active {
    background-color: white;
   }
   li.quiet {
    background-color: #5a5a58;
   }
   .btns {
    display: none;
   }
   .btns span {
    position: absolute;
    width: 25px;
    height: 40px;
    top: 50%;
    margin-top: -20px;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    font-family: simsun;
    font-size: 30px;
    border: 1px solid #fff;
    opacity: 0.5;
    cursor: pointer;
    color: #fff;
    background: black;
   }
   .btns .left {
    left: 5px;
   }
   .btns .right {
    left: 100%;
    margin-left: -32px;
   }
  </style>
 </head>
 <body>
  <div id="wrapper">
   <div class="content">
    <ul class="imgs">
     <li><img src="img/s1.jpg" /></li>
     <li><img src="img/s2.jpg" /></li>
     <li><img src="img/s3.jpg" /></li>
     <li><img src="img/s4.jpg" /></li>
     <li><img src="img/s5.jpg" /></li>
    </ul>
    <ul class='dots'></ul>
   </div>
   <div class="btns">
    <span class="left">&lt;</span>
    <span class="right">&gt;</span>
   </div>
  </div>
 </body>
</html>
<script>
 var wrapper = document.getelementbyid("wrapper");
 var imgs = document.getelementsbyclassname("imgs")[0];
 var dots = document.getelementsbyclassname("dots")[0];
 var btns = document.getelementsbyclassname("btns")[0];
 var dotss = dots.children;
 var len = imgs.children.length; //图片张数
 var width = wrapper.offsetwidth; //每张图片的宽度
 var rate = 15; //一张图片的切换速度， 单位为px
 var times = 1; //切换速度的倍率
 var timer = null; //初始化一个定时器
 var imgsub = 0; //当前显示的图片下标
 var dotsub = 0; //当前显示图片的小圆点下标
 var temp;
 // 创建一个文档片段，此时还没有插入到 dom 结构中
 const frag = document.createdocumentfragment()
 // 根据图片数量添加相应的小圆点到文档片段中
 for (let i = 0; i < len; i++) {
  const dot = document.createelement("li");
  dot.classname = 'quiet';
  // 先插入文档片段中
  frag.appendchild(dot);
 }
 // 将小圆点片段统一插入到 dom 结构中
 dots.appendchild(frag)
 // 第一个小圆点高亮显示
 dots.children[0].classname = "active";
 // 滑动函数
 function roll(distance) { //参数distance：滚动的目标点（必为图片宽度的倍数）
  clearinterval(imgs.timer); //每次运行该函数必须清除之前的定时器！
  //判断图片移动的方向
  var speed = imgs.offsetleft < distance ? rate : (0 - rate);
  //设置定时器，每隔10毫秒，调用一次该匿名函数
  imgs.timer = setinterval(function() {
   //每一次调用滚动到的地方 (速度为 speed px/10 ms)         
   imgs.style.left = imgs.offsetleft + speed + "px";
   //距目标点剩余的px值      
   var leave = distance - imgs.offsetleft;
   /*接近目标点时的处理，滚动接近目标时直接到达， 避免rate值设置不当时不能完整显示图片*/
   if (math.abs(leave) <= math.abs(speed)) {
    clearinterval(imgs.timer);
    imgs.style.left = distance + "px";
   }
  }, 10);
 }
 /*克隆第一个li到列表末*/
 imgs.appendchild(imgs.children[0].clonenode(true));
 function autorun() {
  imgsub++;
  dotsub++;
  if (imgsub > len) { //滚动完克隆项后
   imgs.style.left = 0; //改变left至真正的第一项处
   imgsub = 1; //从第二张开始显示
  }
  // 调用滚动函数，参数为该下标的滚动距离
  roll(-imgsub * width);
  // 如果圆点下标已滚动到最后，则将下标重置为0
  if (dotsub > len - 1) { //判断是否到了最后一个圆点
   dotsub = 0;
  }
  // 循环修改所有圆点默认样式
  for (var i = 0; i < len; i++) {
   dotss[i].classname = "quiet";
  }
  // 给当前滚动到的圆点添加高亮样式
  dotss[dotsub].classname = "active";
 }
 // 创建定时器，开始自动滚动
 timer = setinterval(autorun,2000);
 // 循环添加小圆点的触发事件
 for (var i = 0; i < len; i++) {
  dotss[i].index = i;
  dotss[i].onmouseover = function() {
   for (var j = 0; j < len; j++) {
    dotss[j].classname = "quiet";
   }
   this.classname = "active";
   temp = dotsub;
   imgsub = dotsub = this.index;
   times = math.abs(this.index - temp); //距离上个小圆点的距离
   rate = rate * times; //根据距离改变切换速率
   roll(-this.index * width);
   rate = 15;
  }
 }
 // 添加事件：鼠标移动到wrapper上，左右切换按钮显示
 wrapper.onmouseover = function() {
  clearinterval(timer);
  btns.style.display = 'block';
 }
 // 添加事件：鼠标移出wrapper，左右切换按钮隐藏
 wrapper.onmouseout = function() {
  timer = setinterval(autorun,2000);
  btns.style.display = 'none';
 }
 // 点击上一张按钮 触发事件
 btns.children[0].onclick = function() {
  imgsub--;
  dotsub--;
  if (imgsub < 0) { //滚动完第一项后
   imgs.style.left = -len * width + "px"; //改变left至克隆的第一项处
   imgsub = dotsub = len - 1;
  }
  roll(-imgsub * width);
  if (dotsub < 0) {
   dotsub = len - 1;
  }
  for (var i = 0; i < len; i++) {
   dotss[i].classname = "quiet";
  }
  dotss[dotsub].classname = "active";
 }
 // 点击下一张按钮 触发事件
 btns.children[1].onclick = autorun;
</script>

图片：

JavaScript实现简易轮播图最全代码解析(ES5)