JavaScript實現輪播圖效果
摘要：
我又來了，同志們。老想你們了
捕獲小可愛一枚。
下面進入正題：用JavaScript原生程式碼寫輪播圖效果。
具體效果就不多說了，網站上面的輪播效果我們都知曉。下面是展示程式碼
html程式碼：
1 <div class="main">
2 ...
我又來了，同志們。老想你們了
捕獲小可愛一枚。
下面進入正題：用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><</span> 11<span>></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 * {
2padding: 0;
3margin: 0;
4 }
5
6 .main {
7height: 400px;
8width: 600px;
9margin: 0 auto;
10position: relative;
11 }
12
13 .main ul li {
14height: 400px;
15width: 600px;
16list-style: none;
17position: absolute;
18display: none;
19 }
20
21 .main ul li img {
22height: 400px;
23width: 600px;
24cursor: pointer;
25 }
26
27 .ctrl {
28height: 40px;
29width: 100%;
30position: absolute;
31bottom: 50%;
32text-align: center;
33 }
34
35 .ctrl span {
36width: 40px;
37height: 40px;
38border-radius: 100%;
39line-height: 40px;
40font-size: 32px;
41color: #ffffff;
42background-color: rgba(0, 0, 0, 0.2);
43cursor: pointer;
44 }
45
46 .ctrl span:nth-child(1) {
47float: left;
48 }
49
50 .ctrl span:nth-child(2) {
51float: right;
52 }
53
54 .ditto {
55position: absolute;
56width: 200px;
57height: 20px;
58bottom: 30px;
59left: 38%;
60 }
61
62 .ditto p {
63height: 20px;
64width: 20px;
65line-height: 20px;
66background: #efefef;
67text-align: center;
68width: 20px;
69height: 20px;
70float: left;
71border-radius: 100%;
72margin-left: 10px;
73cursor: pointer;
74 }
75
76 .ditto .active {
77background: #ff9000;
78box-shadow: 0 0 10px #FF9000;
79 }
css程式碼
js程式碼：
1 <script type="text/javascript">
2//獲取節點
3var box_v = document.querySelector('.main');
4var li_v = document.querySelectorAll('.main ul li');
5var p_v = document.querySelectorAll('.ditto>p');
6var ctrl_v = document.querySelectorAll('.ctrl>span');
7console.log(li_v);
8//宣告全域性變數
9var current = 0;
10var timer = null;
11var pre = null;
12var nex = null;
13//開啟自動迴圈輪播,封裝函式move
14function move() {
15//首先清除當前current以外的li_v的樣式顯示和偽圓標p_v的效果, 以下的同上
16for (let i = 0; i < li_v.length; i++) {
17li_v[i].style.display = "none";
18p_v[i].className = "";
19}
20//滑鼠移入的時候獲取當前的索引,也就是變數current
21current = (current + 1) % li_v.length;
22console.log(current);
23
24//然後一個一個實現輪播和圖示效果
25li_v[current].style.display = "block";
26p_v[current].className = "active";
27};
28timer = setInterval(move, 1500);
29
30for (let i = 0; i < li_v.length; i++) {
31//滑鼠劃入圖片區域時清除定時器,暫停於當前頁面
32li_v[i].onmouseover = function() {
33clearInterval(timer);
34}
35//滑鼠移出圖片區域時繼續向下輪播
36li_v[i].onmouseout = function() {
37timer = setInterval(move, 1500);
38}
39}
40// 當滑鼠放在小圓標的時候清除定時器,暫停於當前圖片頁面和圓標實現效果
41for (var i = 0; i < p_v.length; i++) {
42p_v[i].index = i;
43p_v[i].onmouseover = function() {
44clearInterval(timer);
45for (var i = 0; i < li_v.length; i++) {
46p_v[i].className = "";
47li_v[i].style.display = "none";
48}
49this.className = "active";
50// console.log(this.index);
51//實現當滑鼠移出小圓標的時候繼續輪播圖片頁面和圓標實現效果,此時current為this.index
52current = this.index;
53li_v[this.index].style.display = "block";
54}
55}
56
57//左按鈕事件
58ctrl_v[0].onclick = function() {
59clearInterval(timer);
60clearInterval(pre);
61pre = setTimeout(preclick, 10)
62timer = setInterval(move, 1500);
63}
64//封裝點選左按鈕實現上個一個圖片
65function preclick() {
66for (var i = 0; i < li_v.length; i++) {
67li_v[i].style.display = "none";
68p_v[i].className = "";
69}
70current = (current - 1 + li_v.length) % li_v.length;
71//console.log(current);
72li_v[current].style.display = "block";
73p_v[current].className = "active";
74};
75// 右邊按鈕事件實現下一張圖片
76ctrl_v[1].onclick = function() {
77clearInterval(timer);
78clearInterval(nex);
79nex = setTimeout(move, 10)
80timer = setInterval(move, 1500);
81}
82</script>
歡迎來訪，你們的瓶子。。。mua，大家晚安