轮播图 

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>轮播图</title>
 6     <link rel="stylesheet" type="text/css" href="css/scroll.css">
 7     <style type="text/css">
 8         ul {
 9             margin: 0;
10             padding: 0;
11             list-style: none;
12         }
13     </style>
14 </head>
15 <body>
16     <div class="scroll">
17         <div class="scroll-img">
18             <!-- 1226 * 460 | 613 * 230 -->
19             <img class="active" src="img/001.jpg" alt="">
20             <img src="img/002.jpg" alt="">
21             <img src="img/003.jpg" alt="">
22             <img src="img/004.jpg" alt="">
23         </div>
24         <ul class="scroll-tag">
25             <li class="active"></li>
26             <li></li>
27             <li></li>
28             <li></li>
29         </ul>
30         <div class="scroll-toggle">
31             <i class="toggle-left">&lt;</i>
32             <i class="toggle-right">&gt;</i>
33         </div>
34     </div>
35 </body>
36 <script src="js/scroll.js"></script>
37 </html>
scroll.html
 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>轮播图</title>
 6     <link rel="stylesheet" type="text/css" href="css/scroll.css">
 7     <style type="text/css">
 8         ul {
 9             margin: 0;
10             padding: 0;
11             list-style: none;
12         }
13     </style>
14 </head>
15 <body>
16     <div class="scroll">
17         <div class="scroll-img">
18             <!-- 1226 * 460 | 613 * 230 -->
19             <img class="active" src="img/001.jpg" alt="">
20             <img src="img/002.jpg" alt="">
21             <img src="img/003.jpg" alt="">
22             <img src="img/004.jpg" alt="">
23         </div>
24         <ul class="scroll-tag">
25             <li class="active"></li>
26             <li></li>
27             <li></li>
28             <li></li>
29         </ul>
30         <div class="scroll-toggle">
31             <i class="toggle-left">&lt;</i>
32             <i class="toggle-right">&gt;</i>
33         </div>
34     </div>
35 </body>
36 <script src="js/scroll.js"></script>
37 </html>
img/scroll.css
  1 let imgs = document.querySelectorAll('img');
  2 let lis = document.querySelectorAll('li');
  3 let toggle_left = document.querySelector('.toggle-left');
  4 let toggle_right = document.querySelector('.toggle-right');
  5 let scroll = document.querySelector('.scroll');
  6 
  7 // 活跃的li
  8 let li_active = null;
  9 // 活跃的img
 10 let img_active = null;
 11 // 活跃的索引
 12 let c_index = 0;
 13 // 定时器
 14 let timer = 0;
 15 
 16 // 点击列表轮播
 17 // 点击li,显示对应图片
 18 for (let i = 0; i < lis.length; i++) {
 19     
 20     if (lis[i].className == "active") {
 21         li_active = lis[i];
 22         // 活跃的索引是一致的
 23         img_active = imgs[i];
 24     }
 25 
 26     lis[i].onclick = function () {
 27         // 将原来活跃的li取消
 28         li_active.className = "";
 29         // 将被点击的li激活
 30         this.className = "active";
 31         // 更新激活的li,方便下一次点击
 32         li_active = this;
 33 
 34         img_active.className = "";
 35         imgs[i].className = "active";
 36         img_active = imgs[i];
 37 
 38         // 更新活跃的索引，服务于自动轮播
 39         c_index = i;
 40     }
 41 }
 42 
 43 // 自动轮播
 44 function autoPlay() {
 45     timer = setInterval(function () {
 46         // 索引: 当前隐藏,下一张显示(最后有个转折)
 47         // 清除当前活跃状态
 48         imgs[c_index].className = "";
 49         lis[c_index].className = "";
 50 
 51         // 转折点
 52         if (c_index == 3) {
 53             c_index = -1;
 54         }
 55 
 56         // 轮播索引一次加一
 57         c_index++;
 58 
 59         // 设置新的活跃状态
 60         imgs[c_index].className = "active";
 61         lis[c_index].className = "active";
 62 
 63         // 更新活跃的li|img，服务于点击切换
 64         li_active = lis[c_index];
 65         img_active = imgs[c_index];
 66     }, 2000)
 67 }
 68 // 页面加载第一次轮播为自启
 69 autoPlay();
 70 
 71 scroll.onmouseover = function () {
 72     // 清除自动轮播
 73     clearInterval(timer);
 74 }
 75 scroll.onmouseout = function () {
 76     // 重新开启自动轮播
 77     autoPlay();
 78 }
 79 
 80 
 81 // 左右切换
 82 toggle_left.onclick = function () {
 83     // 清除当前活跃状态
 84     li_active.className = "";
 85     img_active.className = "";
 86 
 87     // 循环的转折
 88     c_index = c_index == 0 ? 4 : c_index;
 89 
 90     // 轮播索引一次加一
 91     c_index--;
 92 
 93     // 设置新的活跃状态
 94     imgs[c_index].className = "active";
 95     lis[c_index].className = "active";
 96 
 97     // 更新活跃的li|img，服务于点击切换
 98     li_active = lis[c_index];
 99     img_active = imgs[c_index];
100 }
101 toggle_right.onclick = function () {
102     // 清除当前活跃状态
103     imgs[c_index].className = "";
104     lis[c_index].className = "";
105 
106     // 循环的转折
107     c_index = c_index == 3 ? -1 : c_index;
108 
109     // 轮播索引一次加一
110     c_index++;
111 
112     // 设置新的活跃状态
113     imgs[c_index].className = "active";
114     lis[c_index].className = "active";
115 
116     // 更新活跃的li|img，服务于点击切换
117     li_active = lis[c_index];
118     img_active = imgs[c_index];
119 }
img/scroll.js

 

posted @ 2020-02-06 16:51  xuqidong  阅读(145)  评论(0)    收藏  举报