当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 原生js实现轮播图

原生js实现轮播图

2018年10月15日  | 移动技术网IT编程  | 我要评论

如何使用原生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

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网