原生JS轮播图

最新推荐文章于 2023-04-13 18:29:32 发布

最帅的前端

最新推荐文章于 2023-04-13 18:29:32 发布

阅读量303

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/mjzhane/article/details/121550775

版权

<body>
     <div class="shell">
        <ul class="images">
            <li class="img"></li>
            <li class="img"></li>
            <li class="img"></li>
        </ul>


        <ul class="min-images">
            <li class="min"></li>
            <li class="min"></li>
            <li class="min"></li>
        </ul>

        <div class="button">
            <div class="button-left">
                <</div>
                    <div class="button-right">></div>
            </div>
        </div>

</body>

CSS部分

<style>
  ul,
    li {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    body {
        background-color: #793f74;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;

    }

    .shell {
        width: 900px;
        height: 500px;
        position: relative;
        overflow-x: hidden;
        border: 10px #fff solid;
        border-radius: 5px;
        box-shadow: 20px 30px 20px rgba(0, 0, 0, 0.5);
        margin: auto;

    }

    .images {
        width: 300%;
        height: 100%;
        display: flex;
        position: absolute;
        left: 0;
        transition: .2s;
        list-style-type: none;
    }

    .img {
        width: 100%;
        background-size: cover;
    }

    .img:nth-child(1) {
        background-image: url("./images/img-1.png");
    }

    .img:nth-child(2) {
        background-image: url("./images/img-2.png");
    }

    .img:nth-child(3) {
        background-image: url("./images/img-3.png");
    }

    .min-images {
        display: flex;
        justify-content: space-evenly;
        position: absolute;
        bottom: 20px;
        width: 40%;
        z-index: 999;
        right: 10%;
    }

    .min {
        width: 60px;
        height: 60px;
        cursor: pointer;
        border-radius: 50%;
        background-size: cover;
        border: solid 5px #fff;
        background-position: -20px 0;
    }

    .min:nth-child(1) {
        background-image: url("./images/img-1.png");
    }

    .min:nth-child(2) {
        background-image: url("./images/img-2.png");
    }

    .min:nth-child(3) {
        background-image: url("./images/img-3.png");
    }

    .button {
        width: 100%;
        height: 100%;
        position: absolute;
        display: flex;
        justify-content: space-between;
        user-select: none;
    }

    .button-left,
    .button-right {
        font-style: 50px;
        background-color: rgba(160, 190, 255, 0.7);
        padding: 0 20px;
        line-height: 500px;
        cursor: pointer;
    }
</style>

JS部分

<script>
    let left = document.querySelector('.button-left')
    let right = document.querySelector('.button-right')
    let min = document.querySelectorAll('.min')
    let images = document.querySelector('.images')

    let index = 0 //表示当前图片，0代表第一张图片
    let time

    function position(){
    images.style.left = (index * -100) + "%"
    }
    
    function add() {
        if (index > min.length - 1) { //如果index大于或等于图片数量
            index = 0 //则回到第一张图片
        } else {
            index++    //不然就index+1
        }
    }
 
    function desc(){
      if (index < 1) { //表示如果当前图片为以第一张
            index = min.length - 1  //则回到最后一张图片
        } else {
            index-- //不然就index-1
}
        

        function timer() {//自动轮播
        time = setInterval(() => {    //setInterval函数代表周期性不停的调用函数
            index++
            desc()
            add()
            position()
        }, 3000)//此处3000为3秒
    }
//左右按钮的点击事件
    left.addEventListener('click', () => {
        desc()
        position()
        clearInterval(time) //clearInterval()方法可取消由setInterval()设置的timeout，此处停止setInterval为了防止连跳两张图
        timer()//取消之后又需要重新开启，不然会停止自动轮播
    })
    right.addEventListener('click', () => {
        desc()
        position()
        clearInterval(time)
        timer()
    })

//小图片按钮
    for (let i = 0; i < min.length; i++) {
        min[i].addEventListener('click', () => {//获取按钮的值
            index = i //大图片等于小图片的值
            position()
            clearInterval(time) 
            timer()
        })

    }

    timer()//开启轮播
</script>

最终结果