JS实现轮播图效果（有详细注释）

最新推荐文章于 2024-05-28 19:26:08 发布

追雪球

最新推荐文章于 2024-05-28 19:26:08 发布

阅读量622

点赞数 1

分类专栏： JavaScript学习笔记文章标签： javascript css html html5 es6

本文链接：https://blog.csdn.net/weixin_43704455/article/details/112005532

版权

JavaScript学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

轮播图

这个代码是博主在学到DOM节点的属性和方法后写的，还没有学习事件，所以可能会有些复杂，但对于初学者可以用来学习逻辑思路。
JS代码如下，有详细注释，html和css都是很基础的代码，也放在文章末尾了。

效果展示：

点我查看页面效果（图片来源网络，打开后刚开始轮播时可能会有的卡，是因为图片有点大，加载慢，多加载一会儿后刷新就可以正常轮播了）

JS

//获取图片地址（自行更改）
let imgArr = ['./img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg', './img/5.jpg', './img/6.jpg'];
//只有轮播效果，立即执行函数
(function(){
    let i = 0;
    setInterval(
        function () {
            i++;
            i == imgArr.length ? i = 0 : "";
            document.getElementsByClassName("box1")[0].src = `${imgArr[i]}`;
        }, 1500
    );
})();

//有轮播效果，并且能选择到某张图片
for (let index in imgArr) {
    let doteEle = document.getElementsByClassName("dote")[0];
    doteEle.innerHTML += `<span οnclick="lun(${index})"></span>`;//创建圆点
}

let j;//声明j（必须在轮播函数外声明，才能使用停止时间函数）
//轮播函数，要传参
function lun(i) {
    let spEle = document.getElementsByClassName("dote")[0].children; //获取圆点
    //判断传参的i，如果是next，即下一张
    if (i == "next") {
        for (let index in imgArr) { //遍历所有的圆点（遍历圆点相当于在遍历图片）
            if (spEle[imgArr.length - 1].style.backgroundColor == "white") { //如果最后一个圆点的背景色为白色，即当前展示的图片是最后一张                
                i = 0; //则让i=0，即下标变为了0，然后从49行开始执行，就从第一张开始展示
            }
            else if (spEle[index].style.backgroundColor == "white") { //如果下标为index的圆点背景色为白色，即当前展示的图片是下标为index的图片
                //则让i=index+1，但index是字符串，所有要先-0，让它的数据类型隐式转换为number；
                //即下标变成了当前图片的下一张，然后从第49行开始执行
                i = index - 0 + 1;
            }
        }
    }
    //判断传参的i，如果是previous，即上一张，同下一张的写法
    if (i == "previous") {
        for (let index in imgArr) {
            if (spEle[0].style.backgroundColor == "white") {
                i = imgArr.length - 1;
            }
            else if (spEle[index].style.backgroundColor == "white") {
                i = index - 1;
            }
        }
    }
    for (let index in imgArr) { //先遍历所有点，让所有点的背景颜色变成默认的
        spEle[index].style.backgroundColor = "rgba(255, 255, 255, 0.5)";
    }
    clearInterval(j); //每次调用前先停止时间函数
    
    //展示下标为i的图片（必须在进行时间函数前先展示传参进来的下标为i的图片，
    //因为时间函数是先等一个时间再进行执行函数，就会出现第一张有多的时间展示）
    document.getElementsByClassName("box2")[0].src = `${imgArr[i]}`;
    spEle[i].style.backgroundColor = "white"; //让下标为i的点变颜色，即让它选中（同61行原因）
    //进行时间函数，从选中的点的下一张开始
    j = setInterval(
        function () {
            for (let index in imgArr) { //先遍历所有点，让所有点的背景颜色变成默认的
                spEle[index].style.backgroundColor = "rgba(255, 255, 255, 0.5)";
            }
            i++; //从选中的点的下一张开始进行时间函数，即下标加一
            i == imgArr.length ? i = 0 : ""; //如果下标等于图片数组的长度，就让下标等于0，即展示第一张
            document.getElementsByClassName("box2")[0].src = `${imgArr[i]}`; //变图片
            spEle[i].style.backgroundColor = "white"; //变点的颜色
        }, 1500
    )
}

lun(0); //打开网页就从下标为0的图片开始执行轮播函数

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>轮播图</title>
</head>
<body>
    <div>
        <h4>只有轮播效果</h4>
        <img src="./img/1.jpg" class="box1">
    </div>
    <div>
        <h4>有轮播效果，并且能选择到某张图片</h4>
        <span class="jianleft" onclick="lun('previous')">&lt;</span>
        <span class="jianright" onclick="lun('next')">&gt;</span>
        <img src="./img/1.jpg" class="box2">
        <div class="dote"></div>
    </div>
    <script src="lunbo.js"></script>
</body>
</html>

CSS

div {
    width: 512px;
    margin: auto;
    position: relative;
}
img {
    width: 512px;
    height: 288px;
    vertical-align: bottom;
}
.dote {
    position: absolute;
    bottom: 0;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dote>span {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    margin: 2px;
}
span[class^="jian"]{
    position: absolute;
    top:50%;
    margin-top: -50%;
    display: inline-block;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    margin: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    text-align: center;
    line-height: 50px;
    color: white;
}
.jianleft{
    left: 0;
}
.jianright{
    right: 0;
}

效果展示：

点我查看页面效果（图片来源网络，打开后刚开始轮播时可能会有的卡，是因为图片有点大，加载有点慢，多加载一会儿后刷新就可以正常轮播了）

追雪球

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
JS实现轮播图效果（有详细注释）

轮播图这个代码是博主在学到DOM节点的属性和方法后写的，还没有学习事件，所以可能会有些复杂，但对于初学者可以用来学习逻辑思路。JS代码如下，有详细注释，html和css都是很基础的代码，也放在文章末尾了。JS//获取图片地址（自行更改）let imgArr = ['./img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg', './img/5.jpg', './img/6.jpg'];//只有轮播效果，立即执行函数(function(){
复制链接

扫一扫