<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <style> * { margin: 0; padding: 0; } #outer { width: 520px; height: 500px; margin: 50px auto; background-color: #e0e0a3; padding: 10px 0; position: relative; overflow: hidden; } #imgList { list-style: none; position: absolute; /*left: -510px;*/ } #imgList li { float: left; margin: 0 10px; } #navDiv { position: absolute; bottom: 30px; } #navDiv a { float: left; width: 20px; height: 20px; /*display: block;*/ background-color: coral; margin: 0 5px; /*设置透明*/ opacity: 0.8; /*兼容IE8*/ filter: alpha(opacity=0.8); bottom: 0px; } #navDiv a:hover { background-color: gray; } </style> <script type="text/javascript" src="tool.js"></script> <script> window.onload = function() { //设置ul宽度 var imgList = document.getElementById("imgList"); var imgArr = document.getElementsByTagName("img"); imgList.style.width = 520 * imgArr.length + "px"; //设置导航栏居中 var outer = document.getElementById("outer"); var navDiv = document.getElementById("navDiv"); navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px"; // var allA = document.getElementsByTagName("a"); var index = 0; var timer; allA[index].style.backgroundColor = "gray"; for (var i = 0; i < imgArr.length; i++) { allA[i].num = i; allA[i].onclick = function() { //点击时，关闭自动切换定时器 clearInterval(timer); index = this.num; imgList.style.left = -520 * index + "px"; setA(); move(imgList, "left", -520 * index, 10, function() { //动画执行完毕，自动切换 autoChange(); }); }; } autoChange(); function setA() { //判断当前索引是否是最后一张图片 if (index > imgArr.length - 1) { index = 0; imgList.style.left = 0 + "px"; } for (var i = 0; i < allA.length; i++) { allA[i].style.backgroundColor = ""; } allA[index].style.backgroundColor = "gray"; } function autoChange() { timer = setInterval(function() { index %= imgArr.length; move(imgList, "left", -520 * index, 10, function() { setA(); index++; }); }, 2000); } } </script> </head> <body> <div id="outer"> <ul id="imgList"> <li><img src="img/IMG_0005.JPG"></li> <li><img src="img/IMG_0001.JPG"></li> <li><img src="img/IMG_0007.JPG"></li> <li><img src="img/IMG_0479.JPG"></li> </ul> <!-- 导航 --> <div id="navDiv"> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> </div> </body> </html>
tool.js
/** * 获取元素样式 */ function getStyle(obj, name) { if (window.getComputedStyle) { return getComputedStyle(obj, null)[name]; } else { return obj.currentStyle[name]; } } /** * 参数： * obj:要执行动画对象 * attr:要执行动画的样式,如：left * traget:执行动画的目标位置 * speed:移动的速度 * callback:回调函数 */ function move(obj, attr, target, speed, callback) { clearInterval(obj.timer); var current = parseInt(getStyle(obj, attr)); if (current > target) { speed = -speed; } obj.timer = setInterval(function() { var oldValue = parseInt(getStyle(obj, attr)); //console.log(oldValue); var newValue = oldValue + speed; if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) newValue = target; obj.style[attr] = newValue + "px"; if (newValue == target) { clearInterval(obj.timer); callback && callback(); } }, 30) }
?
??
