JavaScript实现轮播图效果

Posted 2021-01-13 瓶子

我又来了，同志们。老想你们了

捕获小可爱一枚。

下面进入正题：用javascript原生代码写轮播图效果。

具体效果就不多说了，网站上面的轮播效果我们都知晓。下面是展示代码

 

html代码：

 1 <div class="main">
 2     <ul>
 3         <li style="display: block;"> <img src="img/a1 (1).jpg" /></li>
 4         <li> <img src="img/a1 (2).jpg" /> </li>
 5         <li> <img src="img/a1 (3).jpg" /> </li>
 6         <li> <img src="img/a1 (4).jpg" /> </li>
 7         <li> <img src="img/a1 (5).jpg" /> </li>
 8     </ul>
 9     <div class="ctrl">
10         <span>&lt;</span>
11         <span>&gt;</span>
12     </div>
13     <div class="ditto">
14         <p class="active">1</p>
15         <p>2</p>
16         <p>3</p>
17         <p>4</p>
18         <p>5</p>
19     </div>
20 
21 </div>

css代码：

 1 * {
 2     padding: 0;
 3     margin: 0;
 4 }
 5 
 6 .main {
 7     height: 400px;
 8     width: 600px;
 9     margin: 0 auto;
10     position: relative;
11 }
12 
13 .main ul li {
14     height: 400px;
15     width: 600px;
16     list-style: none;
17     position: absolute;
18     display: none;
19 }
20 
21 .main ul li img {
22     height: 400px;
23     width: 600px;
24     cursor: pointer;
25 }
26 
27 .ctrl {
28     height: 40px;
29     width: 100%;
30     position: absolute;
31     bottom: 50%;
32     text-align: center;
33 }
34 
35 .ctrl span {
36     width: 40px;
37     height: 40px;
38     border-radius: 100%;
39     line-height: 40px;
40     font-size: 32px;
41     color: #ffffff;
42     background-color: rgba(0, 0, 0, 0.2);
43     cursor: pointer;
44 }
45 
46 .ctrl span:nth-child(1) {
47     float: left;
48 }
49 
50 .ctrl span:nth-child(2) {
51     float: right;
52 }
53 
54 .ditto {
55     position: absolute;
56     width: 200px;
57     height: 20px;
58     bottom: 30px;
59     left: 38%;
60 }
61 
62 .ditto p {
63     height: 20px;
64     width: 20px;
65     line-height: 20px;
66     background: #efefef;
67     text-align: center;
68     width: 20px;
69     height: 20px;
70     float: left;
71     border-radius: 100%;
72     margin-left: 10px;
73     cursor: pointer;
74 }
75 
76 .ditto .active {
77     background: #ff9000;
78     box-shadow: 0 0 10px #FF9000;
79 }

css代码

 

js代码：

 1 <script type="text/javascript">
 2         //获取节点
 3         var box_v = document.querySelector(‘.main‘);
 4         var li_v = document.querySelectorAll(‘.main ul li‘);
 5         var p_v = document.querySelectorAll(‘.ditto>p‘);
 6         var ctrl_v = document.querySelectorAll(‘.ctrl>span‘);
 7         console.log(li_v);
 8         //声明全局变量
 9         var current = 0;
10         var timer = null;
11         var pre = null;
12         var nex = null;
13         //开启自动循环轮播,封装函数move
14         function move() {
15             //首先清除当前current以外的li_v的样式显示和伪圆标p_v的效果, 以下的同上
16             for (let i = 0; i < li_v.length; i++) {
17                 li_v[i].style.display = "none";
18                 p_v[i].className = "";
19             }
20             //鼠标移入的时候获取当前的索引,也就是变量current
21             current = (current + 1) % li_v.length;
22             console.log(current);
23 
24             //然后一个一个实现轮播和图标效果
25             li_v[current].style.display = "block";
26             p_v[current].className = "active";
27         };
28         timer = setInterval(move, 1500);
29 
30         for (let i = 0; i < li_v.length; i++) {
31             //鼠标划入图片区域时清除定时器,暂停于当前页面
32             li_v[i].onmouseover = function() {
33                 clearInterval(timer);
34             }
35             //鼠标移出图片区域时继续向下轮播
36             li_v[i].onmouseout = function() {
37                 timer = setInterval(move, 1500);
38             }
39         }
40         // 当鼠标放在小圆标的时候清除定时器,暂停于当前图片页面和圆标实现效果
41         for (var i = 0; i < p_v.length; i++) {
42             p_v[i].index = i;
43             p_v[i].onmouseover = function() {
44                 clearInterval(timer);
45                 for (var i = 0; i < li_v.length; i++) {
46                     p_v[i].className = "";
47                     li_v[i].style.display = "none";
48                 }
49                 this.className = "active";
50                 // console.log(this.index);
51                 //实现当鼠标移出小圆标的时候继续轮播图片页面和圆标实现效果,此时current为this.index
52                 current = this.index;
53                 li_v[this.index].style.display = "block";
54             }
55         }
56 
57         //左按钮事件
58         ctrl_v[0].onclick = function() {
59             clearInterval(timer);
60             clearInterval(pre);
61             pre = setTimeout(preclick, 10)
62             timer = setInterval(move, 1500);
63         }
64         //封装点击左按钮实现上个一个图片
65         function preclick() {
66             for (var i = 0; i < li_v.length; i++) {
67                 li_v[i].style.display = "none";
68                 p_v[i].className = "";
69             }
70             current = (current - 1 + li_v.length) % li_v.length;
71             //         console.log(current);
72             li_v[current].style.display = "block";
73             p_v[current].className = "active";
74         };
75         // 右边按钮事件实现下一张图片
76         ctrl_v[1].onclick = function() {
77             clearInterval(timer);
78             clearInterval(nex);
79             nex = setTimeout(move, 10)
80             timer = setInterval(move, 1500);
81         }
82     </script>

 

 

 欢迎来访，你们的瓶子。。。mua，大家晚安