自己动手实现一个轮播图组件

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第31天，点击查看活动详情

🎈大家好，我是李乐一，新人初来乍到，请多多关照~

📝小小的前端一枚，分享一些日常的学习和项目实战总结~

😜如果本文对你有帮助的话，帮忙点点赞呀！ღ( ´･ᴗ･` )比心~

写在前面

轮播图是我们开发中经常会有的一个需求，一些成熟的框架基本都封装了轮播图。可以直接使用。本文将自己动手用原生js制作一个轮播图。记录一下，温故而知新！

1. 轮播图原理

轮播图的原理：

• 定位的运用
• 定时器的运用

轮播图的每一张图横向依次排列。在最外层还有一个父级盒子，它的宽度刚好是一张图片的宽度，第一张图没有设置隐藏超出部分，第二张图隐藏了超出部分。

当我们的图片位置不断变化，让它出现在可视区域内，再加上一些动画，就变成了我们想要的轮播图。

2. 实现效果

• 图片定时自动轮播
• 轮播有动画效果
• 点击左右切换按钮可以切换前一张、后一张
• 点击图片对应的数字索引可以切换到对应图片
• 数字按钮点击有选中的效果
• 鼠标移入移出轮播图自动播放

3. 实现方式

3.1 HTML布局

HTML布局主要分为了三部分：左右切换按钮、图片列表、底部数字切换按钮。

💡代码实现

<div class="container">
    <!--  图片列表  -->
    <ul class="ul-img">
        <li class="li-img">1</li>
        <li class="li-img">2</li>
        <li class="li-img">3</li>
        <li class="li-img">4</li>
        <li class="li-img">5</li>
    </ul>

    <!--  上一张、下一张按钮  -->
    <div class="prev">
        <span>&lt;</span>
    </div>
    <div class="next">
        <span>&gt;</span>
    </div>

    <!-- 数字切换按钮 -->
    <div class="num-box">
        <ul class="num-ul">
            <li data-index="0">1</li>
            <li data-index="1">2</li>
            <li data-index="2">3</li>
            <li data-index="3">4</li>
            <li data-index="4">5</li>
        </ul>
    </div>
</div>

给数字切换按钮的li标签添加了一个自定义属性，用来判断与哪一张图片对应，方便设置选中效果。

🖼️效果展示

3.2 JS代码

让轮播自动播放

// 获取元素节点
var containerDom = document.getElementsByClassName("container")[0]; // 容器
var ulDom = document.getElementsByClassName("ul-img")[0]; // 图片盒子
var prevDom = document.getElementsByClassName("prev")[0].firstElementChild; // 上一张按钮
var nextDom = document.getElementsByClassName("next")[0].firstElementChild; // 下一张按钮
var numUlDom = document.getElementsByClassName("num-ul")[0]; // 数字按钮父级容器
var numList = document
    .getElementsByClassName("num-ul")[0]
    .getElementsByTagName("li"); // 数字切换按钮列表

// 定义全局变量
var currentIndex = 0; // 当前显示的图片索引
var timer = null; // 自动播放定时器
numList[currentIndex].style.backgroundColor = "#ccc"; // 默认选中第一个数字
// 上一张
prevDom.addEventListener("click", prevFun);
// 下一张
nextDom.addEventListener("click", nextFun);
// 鼠标移入容器，停止自动播放
containerDom.addEventListener("mouseenter", stopAutoPlay);
// 鼠标移出容器，开启自动播放
containerDom.addEventListener("mouseleave", autoPlay);
// 数字按钮点击事件
numUlDom.addEventListener("click", numClick);

// 开启自动播放
autoPlay();

切换上一张

function prevFun() {
    ulDom.style.transition = "0.5s";
    numList[currentIndex].style.backgroundColor = ""; // 清空上一个按钮的样式
    if (currentIndex === 0) {
        ulDom.style.transition = "0s"; // 为了实现无缝滚动，清除动画
        currentIndex = 4;
    } else {
        --currentIndex;
    }
    ulDom.style.left = `-${currentIndex * 600}px`;
    numList[currentIndex].style.backgroundColor = "#ccc";
}

切换下一张

function nextFun() {
    ulDom.style.transition = "0.5s";
    numList[currentIndex].style.backgroundColor = ""; // 清空上一个按钮的样式
    if (currentIndex === 4) {
        ulDom.style.transition = "0s"; // 为了实现无缝滚动，清除动画
        currentIndex = 0; // 重新播放第一张
    } else {
        ++currentIndex;
    }
    ulDom.style.left = `-${currentIndex * 600}px`;
    numList[currentIndex].style.backgroundColor = "#ccc"; // 设置按钮选中样式
}

当我们点击切换按钮，首先清除掉上一个数字按钮的选中样式，然后判断是否是最后一张图片或者第一张图片。声明了一个全局变量currentIndex用来存储当前展示的是第几张图片。通过currentIndex动态计算改变需要展示的图片的left距离。

点击数字按钮

function numClick(e) {
    ulDom.style.transition = "0.5s";
    let index = e.target.dataset.index;
    if (index == undefined) {
        return;
    }
    numList[currentIndex].style.backgroundColor = ""; // 清空上一个按钮的样式
    currentIndex = Number(index);
    numList[currentIndex].style.backgroundColor = "#ccc";
    ulDom.style.left = `-${currentIndex * 600}px`;
}

循环播放

function autoPlay() {
    timer = setInterval(nextFun, 1000);
}

关闭自动播放

function stopAutoPlay() {
    // 清除定时器
    clearInterval(timer);
}

3.3 CSS样式

需要将图片列表一行展示，并让最外层的盒子设置超出隐藏，数字按钮定位到对应的位置

💡代码实现

.container {
    position: relative;
    width: 600px;
    height: 400px;
    margin: 0 auto;
    background-color: gray;
    overflow: hidden;
}

.ul-img {
    position: absolute;
    display: flex;
    width: 4200px;
    height: 400px;
    left: 0;
    padding: 0;
    margin: 0;
}

.li-img {
    list-style: none;
    width: 600px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: aquamarine;
    font-size: 30px;
    font-weight: 800;
    border: 1px solid #ccc;
}

/* 上一张、下一张 */
.prev,
.next {
    position: absolute;
    height: 400px;
    width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
}

.prev {
    left: 0;
}

.next {
    right: 0;
}

.prev span,
.next span {
    display: block;
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    cursor: pointer;
}

.num-box {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, 0);
    z-index: 2;
}

.num-ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.num-ul li {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 9px;
    color: #fff;
    margin: 0 4px;
    cursor: pointer;
    user-select: none;
}