//尝试创建一个可以执行简单动画的函数 /* * 参数： * obj:要执行动画的对象 * attr:要执行动画的样式，比如：left top width height * target:执行动画的目标位置 * speed:移动的速度(正数向右移动，负数向左移动) * callback:回调函数，这个函数将会在动画执行完毕以后执行 */ function move(obj, attr, target, speed, callback) { //关闭上一个定时器 clearInterval(obj.timer); //获取元素目前的位置 var current = parseInt(getStyle(obj, attr)); //判断速度的正负值 //如果从0 向 800移动，则speed为正 //如果从800向0移动，则speed为负 if(current > target) { //此时速度应为负值 speed = -speed; } //开启一个定时器，用来执行动画效果 //向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识 obj.timer = setInterval(function() { //获取box1的原来的left值 var oldValue = parseInt(getStyle(obj, attr)); //在旧值的基础上增加 var newValue = oldValue + speed; //判断newValue是否大于800 //从800 向 0移动 //向左移动时，需要判断newValue是否小于target //向右移动时，需要判断newValue是否大于target if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) { newValue = target; } //将新值设置给box1 obj.style[attr] = newValue + "px"; //当元素移动到0px时，使其停止执行动画 if(newValue == target) { //达到目标，关闭定时器 clearInterval(obj.timer); //动画执行完毕，调用回调函数 callback && callback(); } }, 30); } /* * 定义一个函数，用来获取指定元素的当前的样式 * 参数： * obj 要获取样式的元素 * name 要获取的样式名 */ function getStyle(obj, name) { if(window.getComputedStyle) { //正常浏览器的方式，具有getComputedStyle()方法 return getComputedStyle(obj, null)[name]; } else { //IE8的方式，没有getComputedStyle()方法 return obj.currentStyle[name]; } } //定义一个函数，用来向一个元素中添加指定的class属性值 /* * 参数: * obj 要添加class属性的元素 * cn 要添加的class值 * */ function addClass(obj, cn) { //检查obj中是否含有cn if(!hasClass(obj, cn)) { obj.className += " " + cn; } } /* * 判断一个元素中是否含有指定的class属性值 * 如果有该class，则返回true，没有则返回false * */ function hasClass(obj, cn) { //判断obj中有没有cn class //创建一个正则表达式 //var reg = /b2/; var reg = new RegExp("\b" + cn + "\b"); return reg.test(obj.className); } /* * 删除一个元素中的指定的class属性 */ function removeClass(obj, cn) { //创建一个正则表达式 var reg = new RegExp("\b" + cn + "\b"); //删除class obj.className = obj.className.replace(reg, ""); } /* * toggleClass可以用来切换一个类 * 如果元素中具有该类，则删除 * 如果元素中没有该类，则添加 */ function toggleClass(obj, cn) { //判断obj中是否含有cn if(hasClass(obj, cn)) { //有，则删除 removeClass(obj, cn); } else { //没有，则添加 addClass(obj, cn); } }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #outer{ height: 333px; width: 520px; margin: 50px auto; background-color: yellowgreen; padding: 10px 0; position: relative; overflow: hidden; } #imgList{ list-style: none; position: absolute; left: 0px; } #imgList li{ float: left; margin: 0px 10px; } #navDiv{ position: absolute; bottom: 15px; } #navDiv a{ /*设置超链接浮动*/ float: left; /*设置超链接的宽和高*/ width: 15px; height: 15px; /*设置背景颜色*/ background-color: red; /*设置左右外边距*/ margin: 0 5px; /*设置透明*/ opacity: 0.5; /*兼容IE8透明*/ filter: alpha(opacity=50); } #navDiv a:hover{ background-color: black; } </style> <script type="text/javascript" src="js/tools.js"> </script> <script type="text/javascript"> window.onload=function(){ var imgList=document.getElementById("imgList"); var imgArr=document.getElementsByTagName("img"); imgList.style.width=520*imgArr.length+"px"; var navDiv=document.getElementById("navDiv"); var outer=document.getElementById("outer"); navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+"px"; var allA=document.getElementsByTagName("a"); var index=0; var timer; allA[index].style.backgroundColor="black"; for(var i=0;i<allA.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 , 20 , function(){ autoChange(); }); } } autoChange(); function setA(){ for(var i=0;i<allA.length;i++){ allA[i].style.backgroundColor=""; } allA[index].style.backgroundColor="black"; } function autoChange(){ timer=setInterval(function(){ index++; index%=imgArr.length; move(imgList,"left",-520*index,20,function(){ setA(); }) },3000); } } </script> </head> <body> <div id="outer"> <ul id="imgList"> <li><img src="img/1.jpg"/></li> <li><img src="img/2.jpg"/></li> <li><img src="img/3.jpg"/></li> <li><img src="img/4.jpg"/></li> <li><img src="img/5.jpg"/></li> <li><img src="img/1.jpg"/></li> </ul> <div id="navDiv"> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> </div> </body> </html>