JavaScript实现带有子菜单和控件的slider轮播图效果

2019-11-19 15:00:57

字体：大中小

来源：转载

供稿：网友

大家或许做过（照片轮播）无限滚动图片的项目，但是，如果使用普通的滚动，当到达最后一张时，便会滚动回第一张，这是一个非常不好的用户体验。下面通过本文给大家分享基于JavaScript实现带有子菜单和控件的slider轮播图效果，具体实现代码如下所示：

实现效果：

实现原理：

// 步骤
// 1. 获取事件源以及相关元素
// 2. 复制第一张图片所在的li，添加到ul的最后面
// 3. 给ol添加li，ul中的个数-1个，并点亮第一个按钮
// 4. 鼠标放到ol的li上切换图片
// 5. 添加定时器
// 6. 左右切换图片（鼠标放上去隐藏，移开显示）

实现代码：

<!DOCTYPE html><html><head>  <title>轮播图</title>  <meta charset="utf-8">  <style type="text/css">    *{      padding: 0;      margin: 0;      list-style: none;      border: 0;    }    .all{      width: 500px;      height: 200px;      padding: 7px;      margin: 100px auto;      position: relative;      box-shadow: 1px 1px 5px #2d2d2d;    }    .screen{      width: 500px;      height: 200px;      overflow: hidden;      position: relative;    }    .screen li{      width: 500px;      height: 200px;      overflow: hidden;      float: left;    }    .screen ul{      position: absolute;      left: 0;      top: 0;      width: 3000px;    }    .all ol{      position: absolute;      right: 10px;      bottom: 10px;      line-height: 20px;      text-align: center;    }    .all ol li{      float: left;      width: 20px;      height: 20px;      text-align: center;      background-color: #fff;      border: 1px solid #ccc;      margin-left: 10px;      cursor: pointer;    }    .all ol li.current{      background-color: #03c03c;    }    #arr{      display: none;    }    #arr span{      width: 40px;      height: 40px;      left: 5px;      top: 50%;      position: absolute;      margin-top: -20px;      background-color: #000;      cursor: pointer;      line-height: 35px;      text-align: center;      font-weight: bold;      font-family: "微软雅黑";      font-size: 30px;      color: #fff;      opacity: 0.3;      border-radius: 50%;      box-shadow: 1px 1px 3px #2d2d2d;    }    #arr #right{      right: 5px;      left: auto;    }  </style></head><body><div class="all" id="all">  <div class="screen" id="screen">    <ul id="ul">      <li><img src="./images/01.jpg" width="500" height="200"></li>      <li><img src="./images/02.jpg" width="500" height="200"></li>      <li><img src="./images/03.jpg" width="500" height="200"></li>      <li><img src="./images/04.jpg" width="500" height="200"></li>      <li><img src="./images/05.jpg" width="500" height="200"></li>    </ul>    <!-- 图片子菜单 -->    <ol>    </ol>    <!-- 左右切换按钮 -->    <div id="arr">      <span id="left"><</span>      <span id="right">></span>    </div>  </div></div><!-- script --><script type="text/javascript">  // 赋值第一张图片放到ul的最后，当图片切换到第五张的时候，直接切换第六张，再从第一张切换到第二张的时候先瞬间切换到第一张图片，然后滑倒第二张  // 步骤  // 1. 获取事件源以及相关元素  // 2. 复制第一张图片所在的li，添加到ul的最后面  // 3. 给ol添加li，ul中的个数-1个，并点亮第一个按钮  // 4. 鼠标放到ol的li上切换图片  // 5. 添加定时器  // 6. 左右切换图片（鼠标放上去隐藏，移开显示）  // 1. 获取事件源以及相关元素  var all = document.getElementById("all");  var screen = all.firstElementChild || all.firstChild;  var imgWidth = screen.offsetWidth;  var ul = screen.firstElementChild || screen.firstChild;  var ol = screen.children[1];  var div = screen.lastElementChild || screen.lastChild;  var spanArr = div.children;  // 2. 复制第一张图片所在的li，添加到ul的最后面  var ulNewLi = ul.children[0].cloneNode(true);  ul.appendChild(ulNewLi);  // 3. 给ol添加li，ul中的个数-1个，并点亮第一个按钮  for(var i=0; i<ul.children.length-1; i++){    var olNewLi = document.createElement("li");    olNewLi.innerHTML = i+1;    ol.appendChild(olNewLi);  }   var olLiArr = ol.children;  olLiArr[0].className = "current";  // 4. 鼠标放到ol的li上切换图片  for(var i=0; i<olLiArr.length; i++){    // 自定义属性，把索引值绑定到元素的index属性上    olLiArr[i].index = i;    olLiArr[i].onmouseover = function(){      // 排他思想      for(var j=0; j<olLiArr.length; j++){        olLiArr[j].className = "";      }      this.className = "current"      // 鼠标放到小方块上时，索引值和key以及square同步      // key = this.index;      // square = this.index;      key = square = this.index;      // 移动盒子      animate(ul, -this.index*imgWidth);    }  }  // 5. 添加定时器  var timer = setInterval(autoPlay, 1000);  // 固定向右切换图片  // 两个定时器（一个记录图片，一个记录子菜单栏）  var key = 0;  var square = 0;  function autoPlay(){    // 通过key的自增来模拟图片的索引值，然后移动ul    key++;    if(key > olLiArr.length){      // 图片已经滑到最后一张，接下来应该跳转到第一张，然后滑动到第二张      ul.style.left = 0;      key = 1;    }    animate(ul, -key*imgWidth);    // 通过控制square的自增来模拟小方块的索引值，然后点亮盒子    // 排他思想做小方块    square++;    if(square > olLiArr.length-1){      // 索引值不能大于5，如果大于5则立即变为0；      square = 0;    }    for(var i=0; i<olLiArr.length; i++){      olLiArr[i].className = "";    }    olLiArr[square].className = "current";  }  // 鼠标放上去清除定时器，移开启动定时器  all.onmouseover = function(){    div.style.display = "block";    clearInterval(timer);  }  all.onmouseout = function(){    div.style.display = "none";    timer = setInterval(autoPlay,1000);  }  // 6. 左右切换图片（鼠标放上去显示，移开隐藏）  spanArr[0].onclick = function(){    // 通过控制key的自增来模拟图片的索引值，然后移动ul    key--;    if(key<0){      // 先移到最后一张，然后key的值取前一张的索引值，然后向前移动      ul.style.left = -imgWidth*(olLiArr.length) + "px";      key = olLiArr.length-1;    }    animate(ul, -key*imgWidth);    // 通过控制square的自增来模拟小方块的索引值，然后点亮小方块    square--;    if(square<0){      // 索引值不能大于等于5，如果为5，立即变为0      square = olLiArr.length-1;    }    for(var i=0; i<olLiArr.length; i++){      olLiArr[i].className = "";    }    olLiArr[square].className = "current";  }  spanArr[1].onclick = function(){    // 右侧的和定时器一模一样    autoPlay();  }  // 动画封装  var absSpeed = 10; //设定步长  function animate(ele, target){    clearInterval(ele.timer);    var speed = target > ele.offsetLeft ? absSpeed : -absSpeed;    ele.timer = setInterval(function(){      var val = target - ele.offsetLeft;      ele.style.left = ele.offsetLeft + speed + "px";      if(Math.abs(val) < Math.abs(speed)){        ele.style.left = target + "px";        clearInterval(ele.timer);      }    }, 10)  }</script></body></html>

总结

以上所述是小编给大家介绍的JavaScript实现带有子菜单和控件的slider轮播图效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：ES7中利用Await减少回调嵌套的方法详解

下一篇：bootstrap Table的一些小操作