js图片轮播效果实现代码

这篇文章主要介绍了js图片轮播效果实现代码，文章对每一步进行了详细阐述，标注注意事项，为顺利实现js图片轮播效果做好铺垫，对轮播效果感兴趣的朋友可以参考一下

首先给大家看一看js图片轮播效果，如下图

具体思路：

一、页面加载、获取整个容器、所有放数字索引的li及放图片列表的ul、定义放定时器的变量、存放当前索引的变量index

二、添加定时器，每隔2秒钟index递增一次、调用一次切换图片函数

提示:

1、 index不能一直无限制的递增下去，需做判断

2、调用切换图片函数时需将递增之后的index作为参数传过去

三、定义图片切换函数

提示:

1.遍历所有放数字索引的li，将每个li上的类去掉。

2.根据传递过来的index值找到对应的li给它添加类设为当前高亮显示。

3. 根据传递过来的index值计算放图片的ul的top值

4. 改变index的值，让其等于传递过来的参数值

注意：放图片的ul的top值=-index*单张图片的高度(所有图片必须等高)

四、鼠标划过整个容器时，图片停止切换，离开继续

提示:

1. 鼠标滑过整个容器时清除定时器

2. 鼠标离开时继续执行定时器，切换至下一张图片

五、遍历所有放数字的li，且给他们添加索引、鼠标滑过时切换至对应的图片。

鼠标滑过时调用图片切换函数，将滑过的li的索引传过去。

具体代码如下：

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

以上就是本文的全部内容，为大家分享了js图片轮播效果实现代码，希望大家喜欢，根据自己的喜好更换图片，制作属于自己的图片轮播效果。