<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; border: 0; list-style-type: none; } #box { 790px; height: 340px; padding: 7px; border: 1px solid #ccc; margin: 100px auto; position: relative; } #screen { 100%; height: 100%; overflow: hidden; position: relative; } #ul { 1000%; position: absolute; top: 0; left: 0; } #ul li { float: left; } #ol { position: absolute; bottom: 10px; right: 10px; line-height: 20px; text-align: center; } #ol span { display: inline-block; 20px; height: 20px; background: #fff; border: 1px solid #ccc; margin-left: 10px; cursor: pointer; } #ol span.current { background: #DB192A; color: #fff; } #arr { display: none; } #arr span { 40px; height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; background: #000; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑体'; font-size: 30px; color: #fff; opacity: 0.3; border: 1px solid #fff; } #arr #right { right: 5px; left: auto; } </style> </head> <body> <div id="box"> <div id="screen"> <ul id="ul"> <li> <img src="img/1.jpg" alt=""> </li> <li> <img src="img/2.jpg" alt=""> </li> <li> <img src="img/3.jpg" alt=""> </li> <li> <img src="img/4.jpg" alt=""> </li> <li> <img src="img/5.jpg" alt=""> </li> </ul> <div id="ol"> </div> </div> <div id="arr"><span id="left"><</span><span id="right">></span></div> </div> <script src="Move.js"></script> <script !src=""> // 获取id函数 function $(id) { return document.getElementById(id); } // 获取非行间样式函数 function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, null)[name]; } } // 缓动动画函数 function Move(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { var stop = true; for (var arr in json) { var offsetValue = arr == 'opacity' ? Math.round(parseFloat(getStyle(obj, arr)) * 100) : parseInt(getStyle(obj, arr)); var target = parseInt(json[arr]); var speed = (target - offsetValue) / 10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (target != offsetValue) { stop = false; } if (arr == 'opacity') { obj.style.opacity = (offsetValue + speed) / 100; obj.style.filter = "alpha(opacity=" + offsetValue + speed + ")"; } offsetValue += speed; obj.style[arr] = offsetValue + 'px'; } if (stop) { clearInterval(obj.timer); if (fn) { fn(); } } }, 20) } // 获取需要的元素 var box = $('box'); var screen = $('screen'); var ul = $('ul'); var ol = $('ol'); var arr = $('arr'); var left = $('left'); var right = $('right'); var lis = $('ul').children; // 获取包裹元素宽度 var imgWidth = screen.offsetWidth; // var index = 0; var timer = null; for (var i = 0; i < lis.length; i++) { // 动态创建索引 var spans = document.createElement('span'); ol.appendChild(spans); spans.innerHTML = i + 1; spans.setAttribute('data-index', i); spans.onmouseover = function () { // 遍历索引，先全部移除class，再对应添加 for (var j = 0; j < ol.children.length; j++) { ol.children[j].removeAttribute('class'); } this.setAttribute('class', 'current'); index = this.getAttribute('data-index'); Move(ul, { 'left': -index * imgWidth }) } } ol.children[0].setAttribute('class', 'current'); // 克隆第一个li追加到ul尾部 var firstLi = ul.children[0].cloneNode(true); ul.appendChild(firstLi); // 显示隐藏 < > box.onmouseover = function () { arr.style.display = 'block'; clearInterval(timer); } box.onmouseout = function () { arr.style.display = 'none'; timer = setInterval(autoPlay, 2000); } // 自动循环轮播 timer = setInterval(autoPlay, 2000); right.onclick = autoPlay; function autoPlay() { // 轮播到本应展示的最后一张时（对应li的倒数第二张），让index为0（第一张），且left值为0 if (index == lis.length - 1) { index = 0; ul.style.left = 0 + 'px'; } index++; Move(ul, { 'left': -index * imgWidth }) // 根据index，使对应索引变色 if (index == lis.length - 1) { ol.children[ol.children.length - 1].removeAttribute('class'); ol.children[0].className = 'current'; } else { for (var i = 0; i < ol.children.length; i++) { ol.children[i].removeAttribute('class'); } ol.children[index].setAttribute('class', 'current'); } } left.onclick = function () { // 第一张时，index == 本应展示的最后一张（对应li的倒数第二张） if (index == 0) { index = lis.length - 1; ul.style.left = -index * imgWidth + 'px'; } index--; Move(ul, { 'left': -index * imgWidth }) for (var i = 0; i < ol.children.length; i++) { ol.children[i].removeAttribute('class'); } ol.children[index].setAttribute('class', 'current'); } </script> </body> </html>