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 }
