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>
