【JS】超简单轮播图，轻松get京东首页同款轮播图效果

本文链接：https://blog.csdn.net/m0_50947589/article/details/124815731

代码呈上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wrap{
            height: 350px;
            width: 500px;
            margin: 50px auto;
            position: relative;
            background-color: cadetblue;
            background-size: cover;
            background-position: center center;
        }
        .arraw{
            width: 30px;
            height: 30px;
            background-color: rgba(0,0,0,.7);
            color: #fff;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
            position: absolute;
            top: 160px;
        }
        .prev{
            left: 10px;
        }
        .next{
            right: 10px;
        }
        .dots{
            position: absolute;
            width: 160px;
            height: 20px;
            background-color: rgba(0,0,0,.7);
            bottom: 10px;
            left: 170px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-radius: 10px;
        }
        .dot{
            width: 10px;
            height: 10px;
            background-color: rgba(255,255,255,.5);
            border-radius: 50%;
        }
        .checked{
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="arraw prev"> < </div>
        <div class="arraw next"> > </div>
        <div class="dots">
            <div class="dot checked"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </div>
</body>
<script>
    var dWrap = document.getElementsByClassName("wrap")[0];

    var data = 
    ['https://img1.baidu.com/it/u=2838359103,4082675852&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
    'https://img2.baidu.com/it/u=1993057335,1496702829&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
    'https://img2.baidu.com/it/u=2378194771,2509231737&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
    'https://img0.baidu.com/it/u=3673331838,1681625713&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500'];


    var dPrev = document.getElementsByClassName("prev")[0];
    var dNext = document.getElementsByClassName("next")[0];
    var dDots = document.getElementsByClassName("dot");

    var showIndex = 0;   //当前显示的图片的下标

    var timer = null; 

    timer = setInterval(function(){
        //修改dot状态
        // dDots[showIndex].className = 'dot';
        // dDots[showIndex].classList.toggle("checked");  //有就删掉checked这个类名，没有就添加checked这个类名
        dDots[showIndex].classList.remove("checked");  //删掉checked这个类名
        showIndex++;
        //越界处理
        showIndex = showIndex === data.length ? 0 : showIndex ;
        changeBg(data[showIndex]);
        dDots[showIndex].classList.add("checked");  //添加checked这个类名
    },5000);

    // dots点击
    for(var i=0;i<dDots.length;i++){
        dDots[i].index = i;  //手动添加下标
        dDots[i].onclick = function(){
            //去掉当前指示点的状态
            dDots[showIndex].classList.remove("checked");
            showIndex = this.index;
            changeBg(data[showIndex]);
            dDots[showIndex].classList.add("checked");  //添加checked这个类名
        }
    }


    dPrev.onclick = function(){
        //修改dot状态
        // dDots[showIndex].className = 'dot';
        // dDots[showIndex].classList.toggle("checked");  //有就删掉checked这个类名，没有就添加checked这个类名
        dDots[showIndex].classList.remove("checked");  //删掉checked这个类名

        showIndex--;
        //判断showIndex = -1
        showIndex = showIndex === -1? data.length-1 : showIndex ;
        changeBg(data[showIndex]);
        dDots[showIndex].classList.add("checked");  //添加checked这个类名
    }

    dNext.onclick = function(){
        //修改dot状态
        // dDots[showIndex].className = 'dot';
        // dDots[showIndex].classList.toggle("checked");  //有就删掉checked这个类名，没有就添加checked这个类名
        dDots[showIndex].classList.remove("checked");  //删掉checked这个类名
        showIndex++;
        //越界处理
        showIndex = showIndex === data.length ? 0 : showIndex ;
        changeBg(data[showIndex]);
        dDots[showIndex].classList.add("checked");  //添加checked这个类名
    }

    //定义一个方法用来改变dWrap的背景图和指示点
    function changeBg(pic) {
        dWrap.style.backgroundImage = `url(${pic})`;
    }
    changeBg(data[0]); //默认显示第一张

    
</script>
</html>

要点讲解：

1.只有getElementById返回一个值，其他getElements方法返回的都是一个类数组集合，需要在后面加[0]来获取第一个值。

2.越界处理

因为展出的共四张图，所以当showIndex++的值等于data.length时，让showIndex的值重新等于0，即显示的第四张图片的下一张回到第一张。

showIndex++;
//越界处理
showIndex = showIndex === data.length ? 0 : showIndex ;

3.修改dot状态的三种方式

//修改dot状态
dDots[showIndex].className = 'dot';

//修改dot状态
dDots[showIndex].classList.toggle("checked");  //有就删掉checked这个类名，没有就添加checked这个类名

//修改dot状态
dDots[showIndex].classList.remove("checked");  //删掉checked这个类名