轮播图 

  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>

 

posted @ 2019-07-30 15:44  zuiaimiusi  阅读(195)  评论(0)    收藏  举报