欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生js实现轮播图

程序员文章站 2022-07-06 09:10:32
如何使用原生js实现轮播图效果呢,现在带着大家做一个小小的例子 先说一下这次的轮播图需要实现的功能点: 1.3s自动切换图片,图片切换时提示点跟随切换 2.鼠标划到图片上,自动切换轮播图停止 3.指示点划过切换对应的图片,图片切换时提示点跟随切换 4.点击上一页下一页按钮切换图片 css代码部分 1 ......

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

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

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

css代码部分

原生js实现轮播图
 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