JS——轮播图高级版
需求：
1、页面需要小图标和箭头
2、定时器不断的滑动图片
3、在点击箭头时，图标和图片随即做出响应
核心思想：
1、往左移动到第一张的情况：在第二张移动到第一张时，这个动画效果完成之后，立刻将ul的left位置切换到最后一张的位置。
2、往右移动到最后一张的情况：在倒数第二张移动到最后一张时，这个动画效果完成之后，立刻将ul的left位置切换到第一张的位置
3、以上两点效果实现的基础是，第一张图片和最后一张图片是一样的。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; list-style: none; } .box { width: 500px; height: 200px; padding: 5px; border: 1px solid #ccc; margin: 150px auto; } .content { width: 500px; height: 200px; overflow: hidden; position: relative; } .content ul { width: 600%; position: absolute; } .content li { float: left; } .content ol { position: absolute; bottom: 14px; right: 20px; } .content ol li { float: left; width: 20px; height: 20px; background-color: #fff; font: 500 17px/20px "simsun"; text-align: center; margin-right: 15px; cursor: pointer; } .arrow { display: none; } .arrow span { position: absolute; top: 50%; margin-top: -20px; width: 30px; height: 40px; background-color: rgba(255, 228, 206, 0.3); text-align: center; font: 400 20px/40px "simsun"; border: 1px solid #fff; cursor: pointer; } .arr-left { left: 5px; border-radius: 0 5px 5px 0; } .arr-right { right: 5px; border-radius: 5px 0 0 5px; } .content .current { background-color: yellow; } </style> </head> <body> <div class="box" id="scrollImg"> <div class="content"> <ul> <li><img src="images/1.jpg"></li> <li><img src="images/2.jpg"></li> <li><img src="images/3.jpg"></li> <li><img src="images/4.jpg"></li> <li><img src="images/5.jpg"></li> </ul> <ol></ol> <div class="arrow"> <span class="arr-left"><</span> <span class="arr-right">></span> </div> </div> </div> <script> var divEle = document.getElementById("scrollImg"); var ulEle = divEle.children[0].children[0]; var imgWidth = divEle.children[0].offsetWidth; var olEle = divEle.children[0].children[1]; var arrEle = divEle.children[0].children[2]; //1、在第五张图片后放置第一张图片 var firstImg = ulEle.children[0].cloneNode(true); ulEle.appendChild(firstImg); //2、创建5个小图标 for (var i = 0; i < ulEle.children.length - 1; i++) { var liEle = document.createElement("li"); liEle.innerHTML = i + 1; olEle.appendChild(liEle); } //3、点亮第一个小图标 olEle.children[0].className = "current"; //4、鼠标放到小图标上轮播图片 var olLiArr = olEle.children; for (var i = 0; i < olLiArr.length; i++) { olLiArr[i].index = i; olLiArr[i].onmouseover = function () { for (var j = 0; j < olLiArr.length; j++) { olLiArr[j].className = ""; } this.className = "current"; animate(ulEle, -imgWidth * this.index); key = square = this.index; } } //5、添加定时器 var timer = setInterval(autoPaly, 1000); var key = 0; var square = 0; //图片1秒钟滑动一次，并且对应的小图片也随机点亮 //当key=5时是第5张图片向第6张图片移动（第6张也就是第1张） //当key=6时其实是第1张向第2张图片移动，此时我们立刻更改ul的left值，达到了偷梁换柱的效果 function autoPaly() { key++; if (key > olLiArr.length) {//key=6立刻将key=1 ulEle.style.left = 0; key = 1; } animate(ulEle, -imgWidth * key); square++; if (key === olLiArr.length) {//当key=5时，此时已经滑动到了第一张图片，所以square=0 square = 0; } for (var i = 0; i < olLiArr.length; i++) { olLiArr[i].className = ""; } olLiArr[square].className = "current"; } //6、鼠标放上去清除定时器，移开后在开启定时器 divEle.onmouseover = function () { arrEle.style.display = "block"; clearInterval(timer); } //在清除定时器时，因为key与square都是全局变量 //所以当再次开启定时器时，函数依然按照原来计划执行 divEle.onmouseout = function () { arrEle.style.display = "none"; timer = setInterval(autoPaly, 1000); } //7、左右箭头切换图片 arrEle.children[0].onclick = function () { key--; if (key < 0) {//key=-1时立刻换到最后一张图片，并将key值赋值成倒数第二张图片的数值 ulEle.style.left = -olLiArr.length * imgWidth + "px"; key = olLiArr.length - 1; } animate(ulEle, -imgWidth * key); square--; if (key < 0) {//当key=5时，此时已经滑动到了第一张图片，所以square=0 square = 4; } for (var i = 0; i < olLiArr.length; i++) { olLiArr[i].className = ""; } olLiArr[square].className = "current"; } arrEle.children[1].onclick = function () { autoPaly(); } //图片移动 function animate(ele, target) { clearInterval(ele.timer); var speed = ele.offsetLeft < target ? 15 : -15; ele.timer = setInterval(function () { ele.style.left = ele.offsetLeft + speed + "px"; var value = ele.offsetLeft - target; if (Math.abs(value) <= Math.abs(speed)) { ele.style.left = target + "px"; clearInterval(ele.timer); } }, 10); } </script> </body> </html>
