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

原生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 {/*overflow: hidden;*/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 {/* 引入动画js文件要求必须有定位 */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); 4for (var i = 0; i < ul.children.length; i++) {//创建一个livar 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的索引号给numnum = index;//当我们点击了某个li就把li的索引号给indexcircle = 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>

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

您可能感兴趣的文章: