原生js实现轮播图

Posted 2021-01-12 一粒尘土

如何使用原生js实现轮播图效果呢，现在带着大家做一个小小的例子

　　先说一下这次的轮播图需要实现的功能点：　

　　　　1.3s自动切换图片,图片切换时提示点跟随切换
　　　　2.鼠标划到图片上，自动切换轮播图停止
　　　　3.指示点划过切换对应的图片，图片切换时提示点跟随切换
　　　　4.点击上一页下一页按钮切换图片

css代码部分

 1 /*初始化浏览器默认样式*/
 2 *{
 3     margin: 0;
 4     padding: 0;
 5 }
 6 /*sowingMap*/
 7 .sowingMap{
 8     width: 800px;
 9     height: 500px;
10     margin: 0 auto;
11     position: relative;
12     overflow: hidden;
13 }
14 /*imgPart*/
15 .imgPart{
16     width: 800px;
17     height: 500px;
18     position: absolute;
19 }
20 /*imgSwitch*/
21 .imgSwitch{
22     width: 800px;
23     height: 500px;
24     position: absolute;
25     list-style: none;
26     display: none;
27     cursor: pointer;
28 }
29 .imgSwitch img{
30     width: 100%;
31     height: 500px;
32 }
33 .imgShow{
34     display: block;
35 }
36 /*spotPart*/
37 .spotPart{
38     position: absolute;
39     bottom: 0;
40     height: 40px;
41     left: 36%;
42 }
43 .spotPart p{
44     width: 20px;
45     height: 20px;
46     border-radius: 100%;
47     background-color: #fff;
48     float: left;
49     margin-left: 20px;
50     cursor: pointer;
51 }
52 /*提示点的选中颜色*/
53 .spotPart .spotColor{
54     background-color: #f00;
55 }
56 /*上一张下一张切换部分*/
57 .preImg , .nextImg{
58     width: 70px;
59     height: 70px;
60     border-radius: 100%;
61     background-color: rgba(255,255,255,0.5);
62     text-align: center;
63     line-height: 70px;
64     font-size: 30px;
65     color: #f5f5f5;
66     position: absolute;
67     top: 190px;
68     cursor: pointer;
69     display: none;
70 }
71 .preImg{
72     left: -35px;
73     text-indent: 25px;
74 }
75 .nextImg{
76     right: -35px;
77     text-indent: -25px;
78 }

css代码部分

html代码部分

 1 <div class="sowingMap">
 2     <ul class="imgPart">
 3         <li class="imgSwitch imgShow"><img src="img/1.jpg"/></li>
 4         <li class="imgSwitch"><img src="img/2.jpg"/></li>
 5         <li class="imgSwitch"><img src="img/3.jpg"/></li>
 6         <li class="imgSwitch"><img src="img/4.jpg"/></li>
 7         <li class="imgSwitch"><img src="img/5.jpg"/></li>
 8     </ul>
 9     <div class="spotPart">
10         <p class="spotColor"></p>
11         <p></p>
12         <p></p>
13         <p></p>
14         <p></p>
15     </div>
16     <div class="loopChange">
17         <p class="preImg">&lt;</p>
18         <p class="nextImg">&gt;</p>
19     </div>
20 </div>

js代码部分

 1 //定义自动轮播的定时器
 2 var startLoop = null;
 3 //获取所有的li 和 p标签
 4 var li_v = document.querySelectorAll("li");
 5 var p_v = document.querySelectorAll(".spotPart p");
 6 var sowingMap = document.querySelector(\'.sowingMap\');
 7 var p_change = document.querySelectorAll(\'.loopChange p\');
 8 //业务1：实现3s钟自动循环切换图片,图片切换时提示点跟随切换
 9 var num = 0;
10 function loopSetInterval() {
11     clearInterval(startLoop);
12     startLoop = setInterval(function() {
13         for(var i = 0; i < li_v.length; i++) {
14             li_v[i].setAttribute("class", "imgSwitch");
15             p_v[i].setAttribute("class", " ");
16         }
17         if(num >= li_v.length - 1) {
18             num = 0;
19         } else {
20             num++;
21         }
22         li_v[num].setAttribute("class", "imgSwitch imgShow");
23         p_v[num].setAttribute("class", "spotColor");
24     }, 3000);
25 }
26 loopSetInterval();
27 
28 //业务2：鼠标划到图片上，轮播图停止自动切换，划出后继续播放
29 for(var i = 0; i < li_v.length; i++) {
30     li_v[i].onmouseover = function() {
31         clearInterval(startLoop);
32     }
33     li_v[i].onmouseout = function() {
34         loopSetInterval();
35     }
36 }
37 
38 //业务三：指示点划过切换对应的图片，图片切换时提示点跟随切换
39 for(var i = 0; i < p_v.length; i++) {
40     p_v[i].index = i;
41     p_v[i].onmouseover = function() {
42         clearInterval(startLoop);
43         for(var i = 0; i < li_v.length; i++) {
44             li_v[i].setAttribute("class", "imgSwitch");
45             p_v[i].setAttribute("class", " ");
46         }
47         this.setAttribute("class", "spotColor");
48         li_v[this.index].setAttribute("class", "imgSwitch imgShow");
49     }
50     p_v[i].onmouseout = function() {
51         loopSetInterval();
52     }
53 }
54 
55 //业务四：点击上一页下一页切换
56 sowingMap.onmouseover = function () {
57     for (var i=0;i<p_change.length;i++) {
58         p_change[i].style.display = "block";        
59     }
60 }
61 sowingMap.onmouseout = function () {
62     for (var i=0;i<p_change.length;i++) {
63         p_change[i].style.display = "none";        
64     }
65 }
66 //点击切换上一张
67 p_change[0].onclick = function  () {
68     console.log(num)
69     for(var i = 0; i < li_v.length; i++) {
70         li_v[i].setAttribute("class", "imgSwitch");
71         p_v[i].setAttribute("class", " ");
72     }
73     if (num <= 0) {
74         num = 4;
75         li_v[num].setAttribute("class", "imgSwitch imgShow");
76         p_v[num].setAttribute("class", "spotColor");
77     } else if(num <= 4){
78         li_v[num-1].setAttribute("class", "imgSwitch imgShow");
79         p_v[num-1].setAttribute("class", "spotColor");
80         num--;
81     }
82 }
83 //点击切换下一张
84 p_change[1].onclick = function  () {
85     console.log(num)
86     for(var i = 0; i < li_v.length; i++) {
87         li_v[i].setAttribute("class", "imgSwitch");
88         p_v[i].setAttribute("class", " ");
89     }
90     if (num >= 4) {
91         num = 0;
92         li_v[num].setAttribute("class", "imgSwitch imgShow");
93         p_v[num].setAttribute("class", "spotColor");
94     } else if(num >= 0){
95         li_v[num+1].setAttribute("class", "imgSwitch imgShow");
96         p_v[num+1].setAttribute("class", "spotColor");
97         num++;
98     }
99 }

 

 

 

好了，一个原生的js代码实现轮播图效果就大功告成了，如果你想使用更简单的办法，可以参考我使用jQuery实现的轮播图效果：

https://www.cnblogs.com/qdclub/p/9782921.html