原生js实现无缝轮播图效果

时间：2021-05-25

原生js实现轮播图效果(无缝滚动)，供大家参考，具体内容如下

效果图：

代码：

<!DOCTYPE html><html lang="en"><!-- day07 7-10-14 --> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./images1/20.animate.js"></script> <style> * { margin: 0; padding: 0; } li { list-style: none; } .focus { position: absolute; top: 100px; left: 200px; width: 721px; height: 455px; background-color: brown; } .prev, .next { display: none; position: absolute; top: 50%; margin-top: -15px; width: 20px; height: 30px; background-color: rgba(0, 0, 0, .3); text-decoration: none; color: #fff; line-height: 30px; text-align: center; font-size: 16px; z-index: 2; } .focus ul { position: absolute; width: 600%; } .focus ul li { float: left; } .prev { left: 0; border-top-right-radius: 15px; border-bottom-right-radius: 15px; } .next { right: 0; border-top-left-radius: 15px; border-bottom-left-radius: 15px; } .promo-nav { position: absolute; bottom: 10px; left: 60px; width: 200px; height: 18px; border-radius: 9px; } .promo-nav li { float: left; width: 10px; height: 10px; background-color: #fff; margin: 2px; border-radius: 50%; } .promo-nav .current { background-color: orange; } .focus ul li a img { width: 721px; height: 455px; } </style></head> <body> <div class="focus"> <ul> <li> <a href="#" ><img src="images1/focu01.jpg" alt=""></a> </li> <li> <a href="#" ><img src="images1/focu02.jpg" alt=""></a> </li> <li> <a href="#" ><img src="images1/focu03.jpg" alt=""></a> </li> <li> <a href="#" ><img src="images1/focu04.jpg" alt=""></a> </li> </ul> <!-- 左侧按钮 --> <a href="javascript:;" class="prev">&lt;</a> <!-- 右侧按钮 --> <a href="javascript:;" class="next">&gt;</a> <ol class="promo-nav"> </ol> </div> <script> window.addEventListener('load', function() { var focus = document.querySelector('.focus'); var prev = document.querySelector('.prev'); var next = document.querySelector('.next'); var focusWidth = focus.offsetWidth; //鼠标经过 focus.addEventListener('mouseenter', function() { prev.style.display = 'block'; next.style.display = 'block'; clearInterval(timer); timer = null; //清除定时器变量 }) //鼠标离开 focus.addEventListener('mouseleave', function() { prev.style.display = 'none'; next.style.display = 'none'; timer = setInterval(function() { next.click(); }, 2000) }) //3.动态生成小圆圈 有几张图片 就生成几个小圆圈 var ul = focus.querySelector('ul'); var ol = focus.querySelector('.promo-nav'); // console.log(ul.children.length); 4 for (var i = 0; i < ul.children.length; i++) { //创建一个li var li = document.createElement('li'); //记录当前小圆圈的索引号 通过自定义属性来做 li.setAttribute('index', i); //插入到ol后面 ol.appendChild(li); //4.鼠标点击小圆圈小圆圈变色(给小圆圈添加current类其余小圆圈移除这个类)(排他思想) //在生成小圆圈的同时直接绑定点击事件 li.addEventListener('click', function() { for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } this.className = 'current'; //5.点击小圆点 移动图片 移动的是ul //ul移动的距离 小圆圈的索引号乘以图片宽度 注意是负值 //当我们点击了某个小li就得到了当前小li的索引号 var index = this.getAttribute('index'); //当我们点击了某个li就把li的索引号给num num = index; //当我们点击了某个li就把li的索引号给index circle = index; console.log(index); animate(ul, -index * focusWidth, ); }) } //把ol里面的第一个li北京颜色设置成白色 ol.children[0].className = 'current'; //6. 克隆第一张li放到ul后面 var first = ul.children[0].cloneNode(true); ul.appendChild(first); //7.点击右侧按钮图片滚动一张 var num = 0; var circle = 0; var flag = true; //右侧按钮 next.addEventListener('click', function() { if (flag) { flag = false; //先关闭节流阀 //5.如果走到最后一张复制图片此时ul快速复原 left改为0(无缝滚动) if (num == ul.children.length - 1) { ul.style.left = 0; num = 0; } num++; animate(ul, -num * focusWidth, function() { flag = true; }); //8.点击右侧按钮小圆圈跟随一起变化 声明一个变量控制小圆圈变化 circle++; //如果 circle等于4说明做到最后克隆的这张图片了 我们就复原 if (circle == ol.children.length) { circle = 0; } // //清除其余小圆圈类名 // for (var i = 0; i < ol.children.length; i++) { // ol.children[i].className = ''; // } // //留下当前小圆圈current类名 // ol.children[circle].className = 'current'; circleChange(); } }) //左侧按钮 prev.addEventListener('click', function() { if (flag) { flag = false; //5.如果走到最后一张复制图片此时ul快速复原 left改为0(无缝滚动) if (num == 0) { num = ul.children.length - 1; ul.style.left = -num * focusWidth + 'px'; } num--; animate(ul, -num * focusWidth, function() { flag = true; }); //8.点击右侧按钮小圆圈跟随一起变化 声明一个变量控制小圆圈变化 circle--; //如果 circle小于0小圆圈要改为第四个小圆圈 if (circle < 0) { circle = ol.children.length - 1; } // 清除其余小圆圈类名 // for (var i = 0; i < ol.children.length; i++) { // ol.children[i].className = ''; // } // 留下当前小圆圈current类名 // ol.children[circle].className = 'current'; circleChange(); } }) function circleChange() { //清除其余小圆圈类名 for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } //留下当前小圆圈current类名 ol.children[circle].className = 'current'; } //10.自动播放轮播图 var timer = setInterval(function() { next.click(); }, 2000) }) </script></body> </html>

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

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

相关文章