原生javascript实现图片自动轮播和点击轮播代码

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. 
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;
43. // 定义并调用自动播放函数
44. if(timer){
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);
59. }
61. // 鼠标划过整个容器时停止自动播放
62. wrap.onmouseover=function(){
64. clearInterval(timer);
66. }
67. // 鼠标离开整个容器时继续播放至下一张
68. wrap.onmouseout=function(){
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);
79. }
80. }
81. function changeoptions(curindex){
82. for(var j=0;j<list.length;j++){
83. list[j].className='';
84. pic.style.top=0;
86. }
87. list[curindex].className='active';
88. pic.style.top=-curindex*170+'px';
89. index=curindex;
90. }
92. }
96. </script>
97. </body>
98. </html>

posted on 2017-02-22 09:00 Isuty 阅读(544) 评论(0) 编辑收藏举报