轮播图--学习代码

萧墨阳

于 2023-04-13 21:24:32 发布

阅读量229

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_65921319/article/details/130140539

版权

轮播图实现效果

（自动轮播，左右按钮切换图片，小圆点切换图片，鼠标移入暂停轮播，鼠标移出继续轮播）

欢迎大佬多指教。

代码如下（示例）：

<style>
        .wrap {
            width: 900px;
            height: 399px;
            position: relative;
            margin: 0 auto;
            margin-top: 100px;
            box-shadow: 30px 40px 20px rgba(0, 0, 0, 0.3);
             /* cursor: pointer;  鼠标指针变成 手 的形状 */
             cursor: pointer;
        }

        .list {
            width: 900px;
            height: 399px;
            position: relative;
            padding-left: 0px;
            border: 7px solid rgb(239, 239, 239);
        }

        .item {
            width: 100%;
            height: 100%;
            list-style: none;
            position: absolute;
            left: 0;
            opacity: 0;
            transition: all .8s;
        }

        .item:nth-child(1) {
            background-image: url("./images/photo01.png");
            background-color: skyblue;
        }

        .item:nth-child(2) {
            background-image: url("./images/photo02.png");
            background-color: yellowgreen;
        }

        .item:nth-child(3) {
            background-image: url("./images/photo03.png");
            background-color: rebeccapurple;
        }

        .item:nth-child(4) {
            background-image: url("./images/photo04.png");
            background-color: pink;
        }

        .item:nth-child(5) {
            background-image: url("./images/photo05.png");
            background-color: orange;
        }

        .item.active {
            z-index: 10;
            opacity: 1;
        }

        .button {
            display: flex;
            width: 100%;
            justify-content: space-between;
            z-index: 100;
            top: 192px;
            position: absolute;
        }

        .button-left {
            display: flex;
            width: 26px;
            justify-content: center;
            line-height: 30px;
            margin-left: 7px;
            background-color: rgb(255, 255, 255);
        }

        .button-right {
            display: flex;
            width: 26px;
            justify-content: center;
            line-height: 30px;
            margin-right: 7px;
            background-color: rgb(255, 255, 255);
        }

        .pointList {
            list-style: none;
            padding-left: 0px;
            position: absolute;
            right: 20px;
            bottom: 20px;
            z-index: 200;
        }

        .point {
            width: 10px;
            height: 10px;
            background-color: antiquewhite;
            border-radius: 100%;
            float: left;
            margin-right: 8px;
            border-style: solid;
            border-width: 2px;
            border-color: slategray;
            cursor: pointer;
        }

        .point.active {
            background-color: cadetblue;
        }
    </style>

</head>

<body>

    <div class="wrap">
        <ul class="list">
            <li class="item active">0</li>
            <li class="item">1</li>
            <li class="item">2</li>
            <li class="item">3</li>
            <li class="item">4</li>
        </ul>
        <ul class="pointList">
            <li class="point active" data-index=0></li>
            <li class="point" data-index=1></li>
            <li class="point" data-index=2></li>
            <li class="point" data-index=3></li>
            <li class="point" data-index=4></li>
        </ul>
        
        <div class="button">
            <span class="button-left"> < </span>
            <span class="button-right"> > </span>
        </div>

    </div>

</body>

<script>
    var items = document.querySelectorAll(".item");//图片
    var points = document.querySelectorAll(".point")//小圆点
    var left = document.querySelector(".button-left");
    var right = document.querySelector(".button-right");
    var all = document.querySelector(".wrap")
    var index = 0;  // 图片索引 代表当前第几张图片
    var time = 0;  //定时器跳转参数初始化


    //封装一个清除active方法
    var clearActive = function () {
        for (i = 0; i < items.length; i++) {
            items[i].className = 'item';
        }
        for (j = 0; j < points.length; j++) {
            points[j].className = 'point';
        }
    }

    //改变active方法
    var goIndex = function () {
        clearActive();
        items[index].className = 'item active';
        points[index].className = 'point active'
    }
    //左按钮事件
    var goLeft = function () {
        if (index == 0) {
            index = 4;
        } else {
            index--;
        }
        goIndex();
    }

    //右按钮事件
    var goRight = function () {
        if (index < 4) {
            index++;
        } else {
            index = 0;
        }
        goIndex();
    }


    //绑定点击事件监听
    left.addEventListener('click', function () {
        goLeft();
        time = 0;//计时器跳转清零
    })
  
    right.addEventListener('click', function () {
        goRight();
        time = 0;//计时器跳转清零
    })

    for (i = 0; i < points.length; i++) {
        points[i].addEventListener('click', function () {
            var pointIndex = this.getAttribute('data-index')
            index = pointIndex;
            goIndex();
            time = 0;//计时器跳转清零
        })
    }
    //计时器轮播效果
    var timer;
    function play() {
        timer = setInterval(() => {
            time++;
            if (time == 20) {
                goRight();
                time = 0;
            }
        }, 100)
    }
    play();
    //移入清除计时器
    all.onmousemove = function () {
        clearInterval(timer)
    }
    //移出启动计时器
    all.onmouseleave = function () {
        play();
    }
</script>