用多了各种组件库的你还会用原生JS写轮播图吗？

近工作学习时间很忙，好久没有更新头条文章了，利用今天周日，使用原生的JavaScript写了一个渐隐渐现的轮播，算是对最近的前端学习的一个小总结吧。下面我来分享一下我写这个功能的步骤以及经验总结。

一、功能说明

1.1 功能介绍

实现一个渐隐渐现的轮播图；
可以自动切换，也可以鼠标点击翻页按钮或者小圆点进行切换；
同时鼠标移动到图片上停止自动切换，鼠标移出图片恢复自动切换。

1.2 效果图如下

渐隐渐现轮播图效果

二、HTML和CSS结构

图片容器：这里我放了4张美女图，为啥用这个，因为养眼。（手动滑稽）
分页容器：就是那几个小圆点，可以切换每一张图片。
翻页按钮：轮播图左右两边的按钮，也可以切换图片。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生JS写一个渐隐渐现轮播图</title>
    <link rel="stylesheet" href="slider.css">
</head>
<body>
    <div class="container">
        <!-- 1. 轮播图片组 -->
        <div class="imgs">
            <a href="" class="slider"><img src="./images/1.jpg" class="active" /></a>
            <a href="" class="slider"><img src="./images/2.jpg" /></a>
            <a href="" class="slider"><img src="./images/3.jpg" /></a>
            <a href="" class="slider"><img src="./images/4.jpg" /></a>
        </div>
        <!-- 2. 小圆点按钮 -->
        <div class="paginations"></div>
        <!-- 3. 翻页按钮 -->
        <div class="skip">
            <a href="#" class="prev"><</a>
            <a href="#" class="next">></a>
        </div>
    </div>
    <script src="slider.js"></script>
</body>
</html>

CSS代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 10px;
}

a {
    text-decoration: none;
}

/* 轮播图的容器 */
.container {
    width: 75em;
    height: 42rem;
    margin: 1em auto;
    position: relative;
    overflow: hidden;
}

/* 轮播图片组 */
.container .imgs {
    width: 75rem;
    height: 42rem;
    overflow: hidden;
}

.container .imgs a {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 0;
    transition: all .6s;
}

.container .imgs a img {
    width: 100%;
    height: 100%;
}

/* 设置默认显示的图片(第一张) */
.container>.imgs a:nth-of-type(1) {
    opacity: 1;
    z-index: 1;
}
.container>.paginations {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1rem;
    /* 水平居中 */
    text-align: center;
    z-index: 99;
}

.container>.paginations a {
    /* 转成行内块元素: 即能水平排列,双支持宽度设置 */
    display: inline-block;
    padding: .8rem;
    margin: 0 0.5em;
    background-color: #fff;
    border-radius: 50%;
    transition: all .5s;
}

.container>.paginations a.active {
    background-color: #000;
}

/* 翻页按钮 */
.container .skip a {
    position: absolute;
    z-index: 99;
    width: 2.5rem;
    height: 5rem;
    line-height: 5rem;
    text-align: center;
    opacity: 0.5;
    top: 50%;
    margin-top: -2.5rem;
    font-size: 2rem;
    background-color: #ccc;
    transition: all .6s;
}

.container .skip .prev {
    left: 0;
}

.container .skip .next {
    right: 0;
}

.container .skip *:hover {
    opacity: 0.9;
    color: #666;   
}

目前页面的基础效果都已经完成了，效果是这样的：

轮播图默认效果

三、JavaScript代码

首先，在做我们的轮播效果之前，我们需要先拿到相关的元素。

// 获取相关容器元素
// 轮播图容器
const container=document.querySelector('.container');
// 图片容器
const imgs=document.querySelector('.imgs');
// 每一张图片元素
const sliderLists=document.querySelectorAll('.slider');
// 小圆点容器元素
const paginations=document.querySelector('.paginations');
// 上翻页按钮
const prevBtn=document.querySelector('.prev');
// 下翻页按钮
const nextBtn=document.querySelector('.next');

至于分页小圆点按钮，我个人认为应该根据轮播图片的数量去动态生成它，因此我是这样写的：

// 创建分页小圆点，首先创建文档片段
let frag=document.createDocumentFragment();
for (let i=0; i < sliderLists.length; i++) {
    const a=document.createElement('a');
    a.href='javascript：;';
    a.class='btn';
    frag.appendChild(a);
}
// 将生成的文档碎片挂载到paginations下
paginations.appendChild(frag);
// 为第一个分页圆点添加默认样式
paginations.firstElementChild.classList.add('active');

分页圆点元素渲染出来之后，先拿到它所有的元素以备后面做点击切换图片的事件使用。

let paginationBtns=document.querySelectorAll('.paginations a');

3.1 实现自动轮播的效果

由于我做的是渐隐渐现的效果，所以需要控制元素的z-index和opacity两个属性的值即可。

实现原理是：哪张图片显示，就把该元素的z-index和opacity值都设置成1，把需要隐藏的元素的z-index和opacity值都设置成0即可。这时，就需要两个值来记录当前图片的位置，和上一张图片的位置。至于自动切换效果，我是利用定时器实现的。

代码实现

// prev 上一张图片的位置，curr 当前图片的位置。默认显示第一张图片。
let prev=0, curr=0;
// 自动切换图片，由于此方法后面还需要再次使用，这里我就封装成了一个函数。
let autoSwitchImg=function () {
    // 记录上一张图片的索引值，默认从0开始，即：第一张图片
    prev=curr;
    // 上一张图片的索引自增1，就是下一张要显示的图片，即当前图片。
    curr++;
    // 判断当前的索引值是不是大于图片的总数，大于的话就从0开始，即第一张图片开始轮播，
    // 否则继续向下一张图片切换。
    curr=curr >=sliderLists.length ? 0 : curr;
    switchImg();
};
// 利用定时器设置自动轮播，这里我默认的是3s自动切换。
let interval=setInterval(autoSwitchImg, 3000);

这里有一点需要注意的是：自动切换函数autoSwitchImg()一定在写在定时器之前，否则会报错。

代码写到这里已经完成了自动切换的效果了。但是会发现有个问题，就是分页小圆点不会跟随着图片进行切换，那是因为我还没实现它的逻辑。现在开始实现这个分页按钮跟随对应的图片进行切换的逻辑。

分页圆点bug

分页小圆点的实现原理是：我们先利用上面拿到的小圆点元素，用forEach()去遍历每一个元素，如果当前图片的位置索引等于小圆点的位置索引（curr===index），那么就给这个圆点添加上一个active类实现切换效果。值得注意的是，我们拿到的小圆点的元素是一个NodeList类数组，需要先转换成数组再使用。具体请看下面的代码实现。

代码实现

// 让分页按钮跟图片索引对应
let switchPaginateBtn=function () {
    Array.from(paginationBtns).forEach((item, index)=> {
        curr===index ? item.className='active' : item.className='';
    });
};

这样就可以实现图片和圆点切换一致地进行了。

以上是自动切换图片的功能，如果我们想实现鼠标移入轮播海报上停止自动切换，鼠标移除再恢复自动切换应该怎么办呢？可以利用鼠标移入(onmouseenter)、移出(onmouseleave)事件进行操作。

代码实现

// 鼠标移入轮播区域取消自动轮播
container.addEventListener('mouseenter', ()=> {
    clearInterval(interval);
    interval=null;
});
// 鼠标移出轮播区域开始自动轮播
container.addEventListener('mouseleave', ()=> {
    interval=setInterval(autoSwitchImg, 3000);
});

截止到目前为止，上面的代码已经实现了图片的渐隐渐现效果，以及鼠标滑入滑出暂停和恢复切换的效果。下面需要做的就是实现手动点击切换事件。

3.2 点击翻页按钮实现切换效果

上一页翻页按钮与自动切换图片的逻辑刚好相反，拿到当前图片的索引，减去1就是上一张图片的索引，也就是要切换到当前图片的索引值。

// 上一页
prevBtn.addEventListener('click', ()=> {
    // 保存当前图片的索引
    prev=curr;
    // 上一张图片就是当前图片的索引值-1
    curr--;
    curr=curr < 0 ? sliderLists.length - 1 : curr;
    switchImg();
});

下一页翻页按钮与自动切换图片的逻辑完全一样，只需要调用一下自动切换的逻辑即可

// 下一页
nextBtn.addEventListener('click', ()=> {
    autoSwitchImg();
});

通过给翻页按钮添加以上两个点击事件，已经完成了点击切换图片的功能了，下面再聊一聊如何通过点击分页小圆点切换图片的功能。

3.3 点击分页小圆点切换图片

实现原理：通过给每个小圆点添加一个点击事件，通过判断当前点击的小圆点的位置索引，切换到对应的图片即可。

代码实现

// 点击分页小圆点切换图片
Array.from(paginationBtns).forEach((item, index)=> {
    item.addEventListener('click', ()=> {
        // 保存当前图片的位置索引
        prev=curr;
        // 将当前点击的小圆点的位置索引值赋值给的需要显示的图片变量
        curr=index;
        // 调用切换图片函数，实现切换效果
        switchImg();
    });
});

以上就是我写这个渐隐渐现轮播图的全部过程，如果有写得不好的地方，请各位大佬批评指正，如果有跟我一样的初学者想看完整代码的同学，可以关注私信我并回复“轮播”获取源码。

天猫商城的建立，开启了互联网的竞相发展，之后京东，苏宁，唯品会等等也群雄并起，给我们这个时代注入了更多的新名词，如：电子商务，网购，网店，快递，物流等等。

随着电子商务的蓬勃发展催生了各种各样的工作岗位：运营，推广，活动策划，设计，美工，摄影，客服，物流等。然而，这个时代，他们都要以销售为目的而开展工作。

很有幸，遇上了自己喜欢的事情，也从当初的小白变成了小油条了，有幸遇上了天猫店铺的强大轮播功能！曾经很疯狂为之迷醉。

一个轮播代码尽然能创造出如此多的特效和功能，在此，我写这些文章的初衷是给予那些想要在这方面有所进步的爱好者看的，也许我的看法存在一定的水平，如果有大神，还望请多指教更正。

好了，开头的话就不多说，现在正式进入正题。

天猫店铺的轮播代码究竟是怎样的代码呢？代码有很多种，比如：C++，PHP，JAVA，CSS等等，我具体要讲的就是CSS和html，另外可能会附带些Javascript，由于本人是自学的，所以只学了点CSS和html的皮毛，虽然是皮毛，但希望多少能给你们想学的，正在学的后来人一点帮助，让你们少走点弯路，如果想学这些，就要尽早下定决心，如果想放弃，可以尽早，说句题外话，从事代码工作的，确实跟学医一样，要学的东西很多，不过道路也是很艰辛的，尤其不是科班出身的。

好了，话题扯远了，言归正传。

如今，天猫和淘宝店铺的代码已经很成熟了，曾经的PC端是那么如火如荼，如今手机端的兴起，更是衬托了PC端已经不那么重要，虽然如此，PC端仍然有借鉴和参考的用途。从事过美工设计的同行们也许都知道，要装修网店，必须多多少少知道点HTML，甚至CSS，在最初的时候，美工设计们切图的方式还是以tr,td表格的形式出现，如今更多是以DIV和li标签的出现，学过一点HTML的都知道，他们是网页语言的标签，是成对出现的。即<div></div><li></li>等。

天猫和淘宝轮播代码由设计师支配自由书写的地方有两大组成部分，就是CSS和HTML(前提是店铺购买了CSS权限，在天猫和淘宝是需要花钱购买的，这一点不同于京东和苏宁，后两者是免费的)，一般大的店铺都有购买，比如：韩都衣舍，天之眼等等。天猫的轮播图片代码一般都是由焦点大图，箭头，轮播序号或者小焦点组成。例如：

3张1920PX宽的大海报，左右箭头，三个小焦点

</li>

</li>

</li>

</li>

</ul>

</div>

</ul> //控制图片最下方的四个小点

</div>

一般轮播代码的基本组成部分都是由关键的四部分组成：1.data-widget-type参数部分，这里的参数部分基本都是这几个，'viewSize':[1920]指的是轮播的大小，disableBtnCls':'disable',表示按钮不可用时的class值。还拿旋转木马来说吧，轮播两侧有2个翻页的按钮：prev和next，你一直按next，轮播到最后一张，已经没有了，不能轮播了，这个时候的Class值，也就是disable的样式，是按钮变成灰色呢，还是按钮变成其他的样式呢？，这个disable是可以自由命名的。'effect':'fade'指的是轮播的方式是渐隐的方式，后面还会有以X轴和Y轴移动的方式，这个参数不多说，以后还会遇到。2.<ul class="myksc-content"> 控制banner图，也就是海报的轮播内容的，3.class="myshb-nav"控制数量的小焦点或者小焦点图，4.class="prev disable" 和class="next"是控制上一张和下一张的箭头。无论各式各样的轮播图组合，最基本的四点是必不可少的（另外其他不在设计师控制的<head>部分的除外，包括控制大小，位置的CSS和JavaScript）。

这就是最初天猫淘宝给商家最初的轮播样式，后来越来越多的网页设计师，前端设计师，店铺模板设计师涌入这个行业，就衍生出了好多风格各异的轮播图和多个轮播组合，我将会在下一期中再来慢慢介绍，介绍天猫利用Widget库能够变化出多少轮播特效代码出来。

（图片来自于互联网，仅供做学习交流使用，不做商业用途，版权归属图片版权方）