1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 8 <script type="text/javascript"> 9 function getStyle(obj,name) 10 { 11 if(window.getComputedStyle) 12 return getComputedStyle(obj,null)[name]; 13 else 14 return obj.currrntStyle[name]; 15 } 16 17 function move(obj,attr,target,speed,callback) 18 { 19 clearInterval(obj.timer); 20 var current = parseInt(getStyle(obj,attr)); 21 if(current>target) 22 speed=-speed; 23 obj.timer=setInterval(function(){ 24 var oldValue=parseInt(getStyle(obj,attr)); 25 var newValue=oldValue+speed; 26 if(speed<0&&newValue<target || speed>0&&newValue>target) 27 newValue=target; 28 obj.style[attr]=newValue+"px"; 29 if(newValue==target){ 30 clearInterval(obj.timer); 31 callback && callback(); 32 } 33 },10); 34 } 35 36 window.onload=function(){ 37 var imgList=document.getElementById("imgList"); 38 var imgArr=document.getElementsByTagName("img"); 39 //设置imgList的宽度 40 imgList.style.width=520*imgArr.length+"px"; 41 //设置导航按钮居中 42 var navDiv=document.getElementById("navDiv"); 43 //获取outer 44 var outer=document.getElementById("outer"); 45 46 var allA=document.getElementsByTagName("a"); 47 //设置navDiv的left值 48 navDiv.style.paddingLeft=(outer.offsetWidth-allA.length*25+10)/2+"px"; 49 //默认显示图片索引 50 var index=0; 51 allA[index].style.backgroundColor="yellow"; 52 53 54 //点击超链接切换到指定的图片 55 for(var i=0;i<allA.length;i++){ 56 //添加num属性 57 allA[i].num=i; 58 allA[i].onclick=function(){ 59 //关闭自动切换的定时器 60 clearInterval(timer); 61 //获取点击超链接的索引 62 index=this.num; 63 //切换图片 64 //imgList.style.left=-index*520+"px"; 65 //修改选中的a 66 setA(); 67 move(imgList,"left",-520*index,10,function(){}); 68 //动画执行完毕，开启自动切换 69 autoChange(); 70 }; 71 } 72 //自动切换图片 73 autoChange(); 74 75 //创建一个方法用来设置选中的a 76 function setA(){ 77 //判断当前索引是否是最后一张图片 78 if(index>=imgArr.length-1){ 79 index=0; 80 //此时显示的最后一张图片，和第一张图片是一样的，通过CSS将最后一张切换成第一张 81 imgList.style.left=0+"px"; 82 } 83 //遍历所有的a，并将它们的背景颜色设置为红色 84 for(var i=0;i<allA.length;i++){ 85 /* 86 allA[i].style.backgroundColor="red";设置内联样式，因为优先级比hover高 87 所以会覆盖hover。当设置为""时，样式表#navDiv里的background-color:red;默认效果生效， 88 这样就不会覆盖了。 89 */ 90 allA[i].style.backgroundColor=""; 91 //将选中的a设置为黄色 92 allA[index].style.backgroundColor="yellow"; 93 } 94 }; 95 //定义一个自动切换的定时器的标识 96 var timer; 97 //创建一个函数，用来开启自动切换图片 98 function autoChange(){ 99 //开启一个定时器，用来定时去切换图片 100 timer=setInterval(function(){ 101 //使索引自增 102 index++; 103 //判断index的值 104 index%=imgArr.length; 105 move(imgList,"left",-520*index,20,function(){ 106 //修改导航按钮 107 setA(); 108 }); 109 },2000); 110 }; 111 }; 112 </script> 113 <style type="text/css"> 114 *{ 115 padding:0px; 116 margin:0px auto; 117 } 118 #outer{ 119 width:520px; 120 height:330px; 121 padding:10px 0px; 122 background-color:purple; 123 position:relative; 124 overflow:hidden; 125 } 126 #imgList{ 127 list-style:none; 128 /* 给子元素开启绝对定位，父元素开启相对定位 129 绝对定位的元素的位置相对于最近的已定位祖先元素， 130 如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。 131 */ 132 position:absolute; 133 left:-520px; 134 } 135 li{ 136 margin:0px 10px; 137 float:left; 138 } 139 /* 设置导航按钮 */ 140 #navDiv{ 141 //开启绝对定位 142 position:absolute; 143 } 144 #navDiv a{ 145 /* 内联元素设置宽高无用 */ 146 float:left; 147 width:15px; 148 height:15px; 149 background-color:red; 150 margin:310px 5px; 151 152 /* 设置透明 */ 153 opacity:0.5; 154 /* 兼容IE8透明 */ 155 filter:alpha(opacity=50); 156 } 157 /* 设置鼠标移入的样式 */ 158 #navDiv a:hover{ 159 background-color:skyblue; 160 bottom:10px; 161 } 162 163 </style> 164 <body> 165 <!-- 166 创建一个外部的div，来作为大的容器 167 --> 168 <div id="outer" class="clearfix"> 169 <!-- 170 创建一个ul，用于放置图片 171 --> 172 <ul id="imgList"> 173 <li><img src="1.jpg"width="500px"height="330px"/></li> 174 <li><img src="2.png"width="500px"height="330px"/></li> 175 <li><img src="3.jpg"width="500px"height="330px"/></li> 176 <li><img src="4.png"width="500px"height="330px"/></li> 177 <li><img src="5.png"width="500px"height="330px"/></li> 178 <li><img src="1.jpg"width="500px"height="330px"/></li> 179 </ul> 180 <!-- 创建导航按钮 --> 181 <div id="navDiv"> 182 <a href="javascript:;"></a> 183 <a href="javascript:;"></a> 184 <a href="javascript:;"></a> 185 <a href="javascript:;"></a> 186 <a href="javascript:;"></a> 187 </div> 188 </div> 189 </body> 190 </html>
