欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-02 22:24:38
本文实例为大家分享了javascript实现简易轮播图效果的具体代码,供大家参考,具体内容如下全部代码: ...

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

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

全部代码:

<!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)

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关标签: js 轮播图