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

时间：2021-05-26

大家或许做过（照片轮播）无限滚动图片的项目，但是，如果使用普通的滚动，当到达最后一张时，便会滚动回第一张，这是一个非常不好的用户体验。下面通过本文给大家分享基于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轮播图效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章