首页轮播 

 1 <!DOCTYPE html>  
 2 <html lang="en">  
 3 <head>  
 4     <meta charset="UTF-8">  
 5     <title>Document</title>  
 6     <style type="text/css">  
 7         /*重置样式*/  
 8         *{margin: 0;padding: 0; list-style: none;}  
 9         /*wrap的轮播图和切换按钮样式*/  
10         .wrap{height: 170px;width: 500px;margin: 100px auto; overflow: hidden;position: relative;}  
11         .wrap ul{position: absolute;}  
12         .wrap ul li{height: 170px;}  
13         .wrap ol{position: absolute;right: 10px;bottom: 10px;}  
14         .wrap ol li{height: 20px;width: 20px;  background-color:#fff;border: 1px solid #eee; margin-left: 10px;float:left; line-height: 20px; text-align: center;}  
15         .wrap ol li.active{background-color: #330099; color: #fff; border: 2px solid green;}  
16     </style>  
17 </head>  
18 <body>  
19 <!-- wrap包裹录播的图片以及可点击跳转的按钮 -->  
20     <div class="wrap" id="wrap">  
21         <ul id="pic">  
22              <li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>  
23              <li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>  
24              <li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>  
25              <li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>  
26              <li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>    
27         </ul>  
28         <ol id="list">  
29             <li class="active">1</li>  
30             <li>2</li>  
31             <li>3</li>  
32             <li>4</li>  
33         </ol>  
34     </div>  
35     <script type="text/javascript">  
36 window.onload=function(){  
37     var wrap=document.getElementById('wrap'),  
38         pic=document.getElementById('pic'),  
39         list=document.getElementById('list').getElementsByTagName('li'),  
40         index=0,  
41         timer=null;  
42   
43       // 定义并调用自动播放函数  
44       if(timer){  
45             
46           clearInterval(timer);  
47           timer=null;  
48       }  
49 timer=setInterval(autoplay,2000);  
50       // 定义图片切换函数  
51       function autoplay(){  
52           index++;  
53           if(index>=list.length){  
54               index=0;  
55           }  
56          changeoptions(index);  
57             
58             
59       }  
60        
61      // 鼠标划过整个容器时停止自动播放  
62 wrap.onmouseover=function(){  
63       
64     clearInterval(timer);  
65       
66 }  
67      // 鼠标离开整个容器时继续播放至下一张  
68     wrap.onmouseout=function(){  
69       
70     timer=setInterval(autoplay,2000);  
71 }  
72      // 遍历所有数字导航实现划过切换至对应的图片  
73      for(var i=0;i<list.length;i++){  
74          list[i].id=i;  
75          list[i].onmouseover=function(){  
76              clearInterval(timer);  
77              changeoptions(this.id);  
78                
79              }  
80          }  
81         function changeoptions(curindex){  
82             for(var j=0;j<list.length;j++){  
83               list[j].className='';  
84               pic.style.top=0;  
85                 
86           }  
87           list[curindex].className='active';  
88           pic.style.top=-curindex*170+'px';  
89           index=curindex;  
90             }   
91        
92    }  
93   
94   
95   
96     </script>  
97 </body>  
98 </html>

 

posted @ 2017-06-30 15:04  icuke  阅读(79)  评论(0)    收藏  举报