轮播图
轮播图
无缝循环思路:
到最后一张时,把第一张克隆一份放到后面,点击下一张,则显示了第一张(新)。
这个时候,迅速把整个图片ul移动到最开始的第一张(旧),好像没有发生变化一样,之后就又可以重新滚动了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; /*注意清除!否则动画设置offsetWidth时移动步长会有问题*/ padding: 0; } .all { width: 500px; height: 200px; padding: 7px; border: 1px solid #ccc; margin: 100px auto; position: relative; } .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; background: #fff; border: 1px solid #ccc; margin-left: 10px; cursor: pointer; } .all ol li.current { background: yellow; } #arr { display: none; background-color: red; z-index: 1000; } #arr span { width: 40px; height: 40px; font-size: 30px; color: #fff; opacity: 0.5; text-align: center; line-height: 40px; background-color: #000; font-weight: bold; cursor: pointer; position: absolute; left: 5px; top: 50%; margin-top: -20px; } #arr #right { right: 5px; left: auto; } </style> </head> <body> <div class="all" id="box"> <div class="screen"> <ul> <li><img src="img/l1.jpg" alt=""></li> <li><img src="img/l2.jpg" alt=""></li> <li><img src="img/l3.jpg" alt=""></li> <li><img src="img/l4.jpg" alt=""></li> <li><img src="img/l5.jpg" alt=""></li> </ul> <!-- 序号--> <ol> </ol> </div> <div id="arr"><span id="left"><</span><span id="right">></span></div> </div> <script src="animate.js"></script> <script> var box = document.getElementById('box'); var screen = box.children[0]; var arr =document.getElementById('arr'); var ul = screen.children[0]; var ol = screen.children[1]; var arrleft = document.getElementById('left'); var arrright = document.getElementById('right'); var count = ul.children.length; var imgWidth = screen.offsetWidth; for(var i=0; i<count; i++) { var li = document.createElement("li"); //动态生成li ol.appendChild(li); li.innerText = i+1; li.onclick = liClk; li.setAttribute('index', i); } var index=0; function liClk() { for(var i=0;i<ol.children.length;i++) { var li = ol.children[i]; li.className = ''; //取消现有的高亮 } this.className = 'current'; //当前点击的高亮显示 //相较初始位置,切换到每张图片需要移动的距离刚好是图片宽度×经过的张数,即标识index index = parseInt(this.getAttribute('index')); animate(ul, -index*imgWidth); } ol.children[0].className = "current"; //高亮显示 box.onmouseenter = function () { arr.style.display = 'block'; clearInterval(timer); //鼠标移上,停止自动播放 }; box.onmouseleave = function () { arr.style.display = 'none'; timer = setInterval(function () { arrright.click(); },2000); }; //var distance = 0; 此变量和前面的index作用类似。打开页面时显示的是第一张,标识为0,之后点击右,distance就会增加,显示第二张图片时变成了1 arrright.onclick = function () { if(index===count){ ul.style.left = 0+'px'; index = 0; } if(index<count){ index++; //法1:单独实现一遍 // animate(ul, -distance*imgWidth); // for(var i=0;i<ol.children.length;i++) { // var li = ol.children[i]; // li.className = ''; // } // ol.children[distance].className = 'current'; if(index===count){ //要移动到克隆图片,没办法用模拟点击,必须用animate animate(ul, -index*imgWidth); for(var i=0;i<ol.children.length;i++) { var li = ol.children[i]; li.className = ''; } ol.children[0].className = 'current'; } else ol.children[index].click(); //法2:点击右相当于点击下面的序号 } }; arrleft.onclick = function () { //如果当前是第一张,要偷偷切换到clone图 if(index===0){ index = count; ul.style.left = -index * imgWidth + 'px'; } index--; //animate(ul,-distance*imgWidth); ol.children[index].click(); }; //无缝滚动 var firstimg = ul.children[0]; //cloneNode()复制节点 参数:true 复制节点中的内容 false 只复制当前接待你,不复制内容 var clone = firstimg.cloneNode(true); ul.appendChild(clone); var timer = setInterval(function () { //自动播放 arrright.click(); },2000); </script> </body> </html>
function animate(element, target) { if(element.timeId) { //判断是否已经有了定时器,有则去掉,以防多次点击开启多个定时器 clearInterval(element.timeId); } element.timeId = setInterval(function () { var step = 16; //步进长度 var current = element.offsetLeft; //盒子当前的位置 if(current>target) { //比目标位置大,反向移动 step = - Math.abs(step); } if(Math.abs(current-target)<Math.abs(step)){ //位置在一步长度之内,认为已经到达目标 clearInterval(element.timeId); //清除定时器 element.style.left = target + 'px'; //设置为目标位置 return; } current += step; //移动 element.style.left = current + 'px'; },30); }