使用原生js实现轮播图

使用原生JS实现轮播图，下面先看看成品；

实现的效果

图片自动滑动切换，鼠标移动到图片上则停止切换；
鼠标移动到圆点时切换到相应的图片；
点击箭头切换到下一张图片；
鼠标离开图片，则隐藏箭头；
默认是3张图片，需要更多图片时，只需追加<img>标签;

实现逻辑

将图片连接成条形，像胶卷一样，给个图片大小的窗口，左右移动图片条，完成切换；

实现代码

HTML

基本的HTML框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" href="css/slide.css">
</head>
<body>
<div class="box">
    <div id="pic_box">
        <img src="img/arrow_left.png" id="arrow-left">
        <img src="img/arrow_right.png" id="arrow-right">
        <!--放圆点用-->
        <ul id="multi-circles"></ul>
        <div id="multi-images">
            <img src="img/1.jpg"><img src="img/2.jpg"><img src="img/3.jpg">
        </div>
    </div>
</div>
<script src="js/slide.js"></script>
</body>
</html>

CSS

使用绝对定位对各个元素布局。

/*定义图片大小与默认图片数*/
:root {
    --imageWidth: 800px;
    --imageHeight: 240px;
    --imageNum: 3;
}

.box {
    margin: 0 auto;
    width: 800px;
}
/*只显示图片大小的窗口展示单张图片*/
#pic_box {
    position: relative;
    width: var(--imageWidth);
    height: var(--imageHeight);
    overflow: hidden;
}
/*绝对定位圆点的位置*/
#multi-circles {
    position: absolute;
    right: 30px;
    bottom: 10px;
    z-index: 2;
}
/*设置圆点的格式并使圆点横排*/
#multi-circles li {
    width: 25px;
    list-style: none;
    font-size: 24px;
    float: left;
    color: white;
}
/*设置计算图片条的长度*/
#multi-images {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: calc(var(--imageWidth) * var(--imageNum));
    height: var(--imageHeight);
    transition: 1s;
}
/*设置左右箭头图标的位置*/
#arrow-right, #arrow-left {
    position: absolute;
    top: 50%;
    margin-top: -24px;
    height: 48px;
    z-index: 3;
    background: rgba(159, 180, 179, 0.38);
    display: none;
    cursor: pointer;
}

#arrow-right {
    right: 0;
}

#arrow-left {
    left: 0;
}

JS

核心步骤：

获取图片个数。
添加圆点。
设置“图片条”长度。
添加圆点、箭头的鼠标与点击事件；
设置图片轮播定时器；

//获得html组件
var arrowLeft = document.getElementById("arrow-left");
var arrowRight = document.getElementById("arrow-right");
var multiImages = document.getElementById("multi-images");
var circles = document.getElementById("multi-circles");
var picBox = document.getElementById("pic_box");
//图片个数
var picNum = multiImages.getElementsByTagName("img").length;
//根据图片数量添加圆点
for (var i = 0; i < picNum; i++) {
    var liElement = document.createElement("li");
    liElement.innerHTML = "●";
    circles.appendChild(liElement);
}
//在html设置图片数量
document.documentElement.style.setProperty("--imageNum", picNum);
//获取css中设置的图片宽度
var imageWidth = getComputedStyle(document.documentElement).getPropertyValue("--imageWidth");
imageWidth = imageWidth.substring(0, imageWidth.indexOf("px"));
//设置轮播图片总长度
multiImages.style.width = picNum * imageWidth + "px";
//获取li列表对象
circles = document.getElementById("multi-circles").getElementsByTagName("li");
//最大下标
var maxIndex = picNum - 1;

//当前图片的序号
var currentIndex = 0;
//为箭头和圆点绑定事件
arrowLeft.addEventListener("click", preMove);
arrowRight.addEventListener("click", nextMove);
for (var i = 0; i < circles.length; i++) {
    circles[i].setAttribute("id", i);
    circles[i].addEventListener("mouseenter", overCircle);
}
//第一次载入，第一个圆是红色
circles[0].style.color = "#ff0000";
//定时器，每2秒移动
var time = setInterval(nextMove, 2000);

//滑过圆点
function overCircle() {
    var preIndex = currentIndex;
    currentIndex = parseInt(this.id);
    moveImage();
    changeCircleColor(preIndex, currentIndex)
}

//左箭头
function preMove() {
    var preIndex = currentIndex;
    if (currentIndex !== 0) {
        currentIndex--;
    } else {
        currentIndex = maxIndex;
    }
    moveImage();
    changeCircleColor(preIndex, currentIndex)
}

//右箭头
function nextMove() {
    var preIndex = currentIndex;
    if (currentIndex !== maxIndex) {
        currentIndex++;
    } else {
        currentIndex = 0;
    }
    moveImage();
    changeCircleColor(preIndex, currentIndex)
}

//移动图片
function moveImage() {
    multiImages.style.left = -currentIndex * imageWidth + "px";
}

//改变圆点颜色
function changeCircleColor(preIndex, currentIndex) {
    circles[preIndex].style.color = "#ffffff";
    circles[currentIndex].style.color = "#ff0000"
}

//鼠标移动到图片上时显示箭头
picBox.addEventListener("mouseover", function (ev) {
    arrowRight.style.display = "block";
    arrowLeft.style.display = "block";
    clearInterval(time);
});
//鼠标离开图片上时隐藏箭头
picBox.addEventListener("mouseleave", function (ev) {
    arrowRight.style.display = "none";
    arrowLeft.style.display = "none";
    time = setInterval(nextMove, 2000);
});