您的位置：首页 > Web前端 > JavaScript

JS实战——轮播图

2019-08-07 22:46 69 查看

原文链接：http://www.cnblogs.com/pcyu/p/11318367.html

　　轮播图在页面中很常见，十分的重要。今天特此练习下。代码如下：

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4   <meta charset="UTF-8" />
5   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7   <title>轮播图</title>
8   <style>
9     * {
10       padding: 0;
11       margin: 0;
12       list-style: none;
13     }
14
15     #wrapper {
16       width: 100%;
17       height: 600px;
18       position: relative;
19     }
20
21     #slide {
22       width: 100%;
23       height: 600px;
24     }
25
26     #slide li {
27       width: 100%;
28       height: 600px;
29       opacity: 0;
30       transition: all .5s;
31       position: absolute;
32     }
33
34     #slide .active {
35       z-index: 10;
36       opacity: 1;
37     }
38
39     #slide img {
40       width: 100%;
41       height: 600px;
42     }
43
44     button {
45       width: 50px;
46       height: 100px;
47       font-size: 30px;
48       position: absolute;
49       top: 250px;
50       z-index: 10;
51     }
52
53     #right-btn {
54       right: 0;
55     }
56
57     .point li {
58       width: 14px;
59       height: 14px;
60       background-color: rgba(0, 0, 0, 0.4);
61       border-radius: 50%;
62       float: left;
63       margin-right: 12px;
64       border: 1px solid rgba(0, 0, 0, 0.4);
65     }
66
67     .point li.active {
68       background-color: rgba(255, 255, 255, 0.4);
69     }
70
71     .point {
72       position: absolute;
73       right: 0;
74       bottom: 2%;
75       z-index: 100;
76       margin-right: 20px;
77     }
78   </style>
79 </head>
80
81 <body>
82   <div id="wrapper">
83     <ul id="slide">
84       <li class="active"><img src="./img/1.jpeg" alt="" /></li>
85       <li><img src="./img/2.jpeg" alt="" /></li>
86       <li><img src="./img/3.jpeg" alt="" /></li>
87       <li><img src="./img/4.jpeg" alt="" /></li>
88       <li><img src="./img/5.jpeg" alt="" /></li>
89     </ul>
90     <button id="left-btn">
91       < </button> <button id="right-btn">>
92     </button>
93     <ul class="point">
94       <li class="active" data-index='0'></li>
95       <li data-index='1'></li>
96       <li data-index='2'></li>
97       <li data-index='3'></li>
98       <li data-index='4'></li>
99     </ul>
100   </div>
101   <script>
102     var oLi = document.getElementsByTagName('li')
103     var oLeftBtn = document.getElementById('left-btn')
104     var oRightBtn = document.getElementById('right-btn')
105     var oPoint = document.getElementsByClassName('point')[0]
106     var oPointLi = oPoint.getElementsByTagName('li')
107     var index = 0
108     var time = 0
109     var goIndex = function () {
110       clearIndex()
111       oLi[index].className = 'active'
112       oPointLi[index].className = 'active'
113     }
114
115     function clearIndex() {
116       for (var i = 0; i < oLi.length; i++) {
117         oLi[i].className = ''
118       }
119       for (var i = 0; i < oPointLi.length; i++) {
120         oPointLi[i].className = ''
121       }
122     }
123
124     oRightBtn.addEventListener('click', function () {
125       if (index < 4) {
126         index++
127       } else {
128         index = 0
129       }
130       goIndex()
131     })
132
133     oLeftBtn.addEventListener('click', function () {
134       if (index === 0) {
135         index = 4
136       } else {
137         index--
138       }
139       goIndex()
140     })
141
142     for (var i = 0; i < oPointLi.length; i++) {
143       oPointLi[i].addEventListener('click', function () {
144         var pointIndex = this.getAttribute('data-index')
145         index = pointIndex
146         goIndex()
147         time = 0
148       })
149     }
150
151     function autoPlay() {
152       setInterval(function () {
153         time++
154         if (time === 20) {
155           if (index < 4) {
156             index++
157           } else {
158             index = 0
159           }
160           goIndex()
161           time = 0
162         }
163       }, 100)
164     }
165     autoPlay()
166   </script>
167 </body>
168 </html>

　　功能该做的都做了，但代码还不够精简，水平有待提高。哈哈。

转载于:https://www.cnblogs.com/pcyu/p/11318367.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航