前言-为什么要学会原生
今天来通过一个完整的项目实例来演示如何使用JavaScript实现某个功能或解决某个问题。本次想给大家介绍的是用原生的写法来实现js轮播图，虽然现在市面上有很多成型的轮播图组件库，比如swagger UI等等，但是有些时候，原生写法依旧十分有必要学会。
毕竟它有很强的性能优化，原生代码通常比依赖第三方库或框架的代码执行得更快，因为它直接与浏览器的渲染引擎交互，没有额外的抽象层。其次， 使用原生代码可以提供对网页元素和行为的完全控制，这对于需要精确控制布局、样式和交互的复杂项目来说非常重要。
还有最重要的一点是，原生代码在所有现代浏览器中都能得到一致的支持，而第三方库或框架可能在某些浏览器或版本中存在兼容性问题。
效果展示
普罗大众的各种轮播图
步骤
html页面
先创建一个HTML结构来容纳轮播图。这通常包括一个容器元素，比如<div>，以及一个列表元素，比如<ul>，来包含所有的轮播项。每个轮播项通常是一个链接<a>，包含一个图片<img>和一些描述性文字。
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
| <li class="wgBanner-box first_active">
<a href="#">
<img src="images/ff14.webp"width=100%>
<div class="wgBanner-write">
<h2>不可错过的IGN高分MMO大作</h2>
<div class="wgBanner-write_box">
<div class="wgBanner-write_box_write">
<span class="ff1401">口碑榜TOP 5</span>
</div>
<div class="wgBanner-write_box_write">
<span class="ff1401">火爆榜TOP 5</span>
</div>
</div>
<h5>时长付费</h5>
</div>
<div class="concern">
<div class="concern_game"><span>关注游戏</span></div>
<div class="and" id="and"><span></span>
</div>
<div class="concern_menu" id="feedback">
<div class="triangle"></div>
<ul class="concern_dropdown-menu">
<li class="concern_dropdown-menu_li">不感兴趣？</li>
<div>
<li class="concern_dropdown-menu_li">素材不好看</li>
<li class="concern_dropdown-menu_li">游戏不喜欢</li>
<li class="concern_dropdown-menu_li">看过了</li>
</div>
</ul>
</div>
</a>
</li>
|
然后我们还需要一个菜单栏部分，类似于小圆点的功能，可以点击切换。
示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <ul class="wgBanner-menu_ul">
<li class="wgBanner-menu_ul_li active" data-index='0'><a href="#"><span>最终幻想14</span></a></li>
<li class="wgBanner-menu_ul_li" data-index='1'><a href="#"><span>崩坏3</span></a></li>
<li class="wgBanner-menu_ul_li" data-index='2'><a href="#"><span>英雄联盟</span></a></li>
<li class="wgBanner-menu_ul_li" data-index='3'><a href="#"><span>模拟经营专题</span></a></li>
<li class="wgBanner-menu_ul_li" data-index='4'><a href="#"><span>只只大冒险</span></a></li>
<li class="wgBanner-menu_ul_li" data-index='5'><a href="#"><span>激战2</span></a></li>
<li class="wgBanner-menu_ul_li" data-index='6'><a href="#"><span>乱世逐鹿</span></a></li>
<li class="wgBanner-menu_ul_li" data-index='7'><a href="#"><span>剑网3缘起</span></a></li>
</ul>
|
css样式
样式思路就是为了创建一个轮播图效果，其中多个图片（或其他内容）在一个容器中依次展示。叠放起来，到某一张图需要展示的时候，就增加active，顶层显示。
容器设置：
.Carousel-figure 是轮播图的容器，它被设置为相对定位（position: relative），并且有一个固定的高度（height: 460px）和宽度（width: 1000px）。- 容器还设置了圆角边框（
border-radius: 8px）和溢出隐藏（overflow: hidden），以确保内容不会超出容器范围。
列表项设置：
.wgBanner 是一个无序列表（<ul>），它包含了所有的轮播项（<li>）。- 列表项（
.wgBanner-box）被设置为绝对定位（position: absolute），这样它们可以堆叠在一起。
- 初始时，所有的列表项都被设置为不透明（
opacity: 0），并且有一个平滑的过渡效果（transition: all 0.5s），这使得它们在切换时能够平滑地淡入淡出。
激活状态设置：
.wgBanner-box.first_active 是一个特殊的类，它被用来标识当前显示的轮播项。- 这个类设置了更高的
z-index值（z-index: 3），以确保它在堆叠顺序中位于最前面。
- 同时，它的不透明度被设置为1（
opacity: 1），使其完全可见。
关键部分css示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
.wgBanner-box {
position: absolute;
opacity: 0;
transition: all 0.5s;
}
.wgBanner-box.first_active {
z-index:3;
opacity: 1;
}
|
js控制轮播图动作
轮播图内点击圆点等的相关动作，比如当你点击轮播图下面的小圆点时，轮播图会根据当前的状态（显示或隐藏）来切换显示或隐藏。这个时候就可以通过一种获取dom的方式来让当前节点实现样式的显示于隐藏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
var and = document.getElementById("and");
var feedback = document.getElementById("feedback");
and.onclick = function() {
if (feedback.style.display=='none'){
feedback.style.display = 'block';
}
else{
feedback.style.display = 'none';
}
return false;
}
|
定义
先获取得到每一个节点
1
2
3
4
5
6
7
8
|
var items = document.getElementsByClassName('wgBanner-box');
var points = document.getElementsByClassName('wgBanner-menu_ul_li');
var index = 0;
|
清除激活状态
这个函数用于清除所有轮播图项目和导航点的激活状态。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
var clearActive = function(){
for(var i = 0; i < items.length; i++){
items[i].className = 'wgBanner-box';
}
for(var i = 0; i < items.length; i++){
points[i].className = 'wgBanner-menu_ul_li';
}
}
|
切换项目
这个函数用于将轮播图切换到某一个index下标的项目或者是下一个项目，并在到达最后一个项目时循环回第一个项目。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
var goIndex = function(){
clearActive();
items[index].className = 'wgBanner-box first_active';
points[index].className = 'wgBanner-menu_ul_li active';
}
var goNext = function(){
if(index<7){
index++;
}
else{
index=0;
}
goIndex();
}
|
定义监听
我们需要为每个导航点添加了鼠标进入和离开事件的监听器。当鼠标进入导航点时，它会切换到对应的轮播图项目，并清除定时器。当鼠标离开导航点时，它会再次切换到对应的轮播图项目。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| for (var i = 0; i < points.length; i++){
points[i].addEventListener('mouseenter',function(){
var pointIndex = this.getAttribute('data-index');
index = pointIndex;
goIndex();
clearInterval(time);
time = null;
})
points[i].addEventListener('mouseleave',function(){
var pointIndex = this.getAttribute('data-index');
index = pointIndex;
goIndex();
})
}
|
实现自动播放
使用 setInterval 函数来实现轮播图的自动播放。每隔 100 毫秒，time 变量加 1。当 time 达到 20 时，它会调用 goNext 函数来切换到下一个项目，并重置 time 变量。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| var time = 0;
setInterval(function() {
time++;
if(time == 20){
goNext();
time = 0;
}
}, 100)
|
思考
轮播图是一种常见的网页展示方式，它可以自动播放图片或内容，也可以通过用户的交互来手动切换。这段代码实现了一个基本的轮播图功能，包括自动播放和手动导航。通过goIndex和goNext函数，我们可以切换到指定索引的轮播图项目，并且在切换时更新对应的导航点状态。鼠标进入和离开导航点时，会切换到对应的轮播图项目，并且清除或重置定时器，实现了手动导航的功能。
代码结构上，分为多个函数和事件监听部分，易于理解和维护。使用了setInterval实现自动播放，clearInterval清除定时器，addEventListener添加事件监听器，这些都是JavaScript中常用的API。通过合理的命名和注释，代码的可读性和可维护性得到了提升。
用到的DOM操作、事件监听、定时器的使用等技术。这些技术在实际开发中非常有用，可以实现各种交互效果和动态功能。例如，通过DOM操作，我们可以动态地改变网页的内容和样式；通过事件监听，我们可以响应用户的操作；通过定时器，我们可以实现自动播放和定时任务等。
