技能点：
DOM操作、定时器、事件运用、JS动画、函数递归、无限滚动大法
焦点图排序（无限滚动大法）：
image5
image1
image2
image3
image4
image5
image1
原理：
1. 假设共有5张图，5张图左浮动排列，
2. 并且都被一个list容器包裹，这个list是很长的，然后list被一个div包裹，
3. div的长度只有一张图的大小那么大，并且设置div的属性为 overflow:hidden
4. div设置为relative，list设置为absolute
5. 改变list的left值，实现焦点图的切换
样式布局HTML、CSS：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css"/> </head> <body> <div id="container"> <div id="list" style="left: -600px;"> <img src="img/5.jpg" alt=""/> <img src="img/1.jpg" alt=""/> <img src="img/2.jpg" alt=""/> <img src="img/3.jpg" alt=""/> <img src="img/4.jpg" alt=""/> <img src="img/5.jpg" alt=""/> <img src="img/1.jpg" alt=""/> </div> <div id="buttons"> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> <span index="5"></span> </div> <a href="javascript:void(0)" id="prev" class="arrow"><</a> <a href="javascript:void(0)" id="next" class="arrow">></a> </div> <script src="script.js"></script> </body> </html>
JS：
window.onload = function () { var container = document.getElementById('container'); var list = document.getElementById('list'); var buttons = document.getElementById('buttons').getElementsByTagName('span'); var prev = document.getElementById('prev'); var next = document.getElementById('next'); var index = 1; var autoTimer = null; /** * 左右切换函数 * @param offset 左右的偏移量 */ var offsetL = 0; function animate(offset) { var oldLeft = parseInt(list.style.left); var newLeft = oldLeft + offset; offsetL = oldLeft; var interval = null; var intervalNum = 10; //console.log('offsetL: ' + offsetL); //console.log('newLeft: ' + newLeft); // 向左切换动画 if((offset > 0) && (offsetL < newLeft)) { //console.log('左'); interval = setInterval(function () { offsetL += offset/(300/intervalNum); // 300为移动的总时间 //console.log(offsetL); list.style.left = offsetL + 'px'; if(offsetL == newLeft) { clearInterval(interval); // 两个if语句实现了无限滚动 if(newLeft > -600) { list.style.left = -3000 + 'px'; } if(newLeft < -3000) { list.style.left = -600 + 'px'; } } }, intervalNum); } // 向右切换动画 if((offset < 0) && (offsetL > newLeft)) { //console.log('右'); interval = setInterval(function () { offsetL -= -offset/(300/intervalNum); // 300为移动的总时间 //console.log(offsetL); list.style.left = offsetL + 'px'; if(offsetL == newLeft) { clearInterval(interval); // 两个if语句实现了无限滚动 if(newLeft > -600) { list.style.left = -3000 + 'px'; } if(newLeft < -3000) { list.style.left = -600 + 'px'; } } }, intervalNum); } } /** * 小圆点切换函数 */ function buttonsCtrl() { for(var i = 0;i < buttons.length;i++) { if(buttons[i].className == 'on') { buttons[i].className = ''; } } buttons[index - 1].className = 'on'; } /** * 自动切换功能 */ function autoPlay() { autoTimer = setInterval(function () { next.onclick(); }, 3000); } /** * 停止自动切换功能 */ function autoStop() { clearInterval(autoTimer); } // 自动切换 autoPlay(); container.onmouseover = autoStop; container.onmouseout = autoPlay; // 左右切换的功能 next.onclick = function () { if(index == 5) { index = 1; }else { index++; } buttonsCtrl(); animate(-600); }; prev.onclick = function () { if(index == 1) { index = 5; }else { index--; } buttonsCtrl(); animate(600); }; /** * 点击小圆点切换焦点图 */ for(var i = 0;i < buttons.length;i++) { buttons[i].onclick = function () { if(this.className == 'on') { return; // 后面的语句不会再执行了，一直到buttonCtrl()都不会再执行 } var myIndex = this.getAttribute('index'); var offset = -600 * (myIndex - index); animate(offset); // index 更新到最新 index = myIndex; // 小圆点变成橙色 buttonsCtrl(); }; } };