elementui自动分页-如果使用多种组件库，你会使用原生JS来写轮播吗？

最近工作学习都很忙，已经很久没有更新头条文章了。 我在明天的周末使用原生 JavaScript 编写了一个淡入淡出的轮播。 也算是对最近后端学习的一个小总结。 下面我来分享一下编写这个函数的步骤和经验总结。

一、功能说明

1.1 功能介绍

实现一个淡入淡出的轮播； 可以手动切换，也可以通过点击翻页按钮或键盘上的小点进行切换； 同时，键盘连接到图片停止手动切换elementui自动分页，鼠标移出图片恢复手动切换。

1.2 效果图如下

淡入淡出轮播效果

2. HTML和CSS结构图片容器：这里我放了4张美女图片，为什么用这个，因为它很吸引眼球。 （手动搞笑）分页容器：就是可以切换每张图片的小点。 翻页按钮：轮播左右两侧的按钮也可以切换图片。

    
    
    
    


    

        
        

            
            
            
            
        
        
        

        
        

            <
            >
        
    
    <script src="slider.js">

* {
    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;   
}

目前页面基本效果已经完成，效果如下：

轮播图默认疗效

3.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()一定要写在定时器之前，否则会报错。

就代码而言，已经完成了手动切换的效果。 但是你会发现一个问题，就是分页点不会跟着图片切换，那是因为我还没有意识到它的逻辑。 现在开始实现分页按钮和对应图片的切换逻辑。

分页点错误

分页点的实现原理是：我们首先使用里面接收到的点元素，使用forEach()遍历每个元素，如果当前图片的位置索引等于点的位置索引（curr === index ），然后给这个dot添加一个active类，实现切换效果。 值得注意的是，我们收到的dot元素是一个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();
    });
});

以上就是编写这个淡入淡出轮播图的整个过程。 如果有写的不好的地方elementui自动分页，还请大家批评指正。 如果有像我一样的初学者想看完整代码，可以关注私信我会回复“轮播”获取源码。