（练习）加强—轮播图

最新推荐文章于 2024-06-13 09:45:33 发布

邢帥兵_

最新推荐文章于 2024-06-13 09:45:33 发布

阅读量131

点赞数

分类专栏： js css html 文章标签： css html javascript

本文链接：https://blog.csdn.net/m0_64875238/article/details/126139132

版权

js 同时被 3 个专栏收录

41 篇文章 29 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

css

6 篇文章 1 订阅

订阅专栏

<!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>
        .banner {
            position: relative;
            width: 590px;
            height: 470px;
            margin: 0 auto;
        }

        .banner a {
            display: none;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            font-size: 36px;
            color: #fff;
            text-align: center;
            line-height: 34px;
            text-decoration: none;
            background-color: rgba(0, 0, 0, .4);
        }

        .banner .prev {
            left: 0;
        }

        .banner .next {
            right: 0;
        }

        .banner .dots {
            position: absolute;
            left: 50%;
            bottom: 12px;
            transform: translateX(-50%);
            display: flex;
        }

        .banner .dots span {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin: 0 5px;
            box-shadow: 0 0 0 2px #fff;
            background-color: rgb(132, 19, 19);
            cursor: pointer;
        }

        .banner .dots span.on {
            background-color: #f00;
        }
    </style>
</head>

<body>
    <div class="banner">
        <img src="img/pic1.webp" alt="" id="pic">
        <a href="javascript:;" class="prev">&lt;</a>
        <a href="javascript:;" class="next">&gt;</a>
        <div class="dots" id="dots">
            <span class="on"></span>
            <span></span>
            <span></span>
        </div>
    </div>

</body>
<script>
    var oImg = document.getElementById("pic");
    var oAs = document.getElementsByTagName("a");
    var oDivs = document.getElementsByClassName("banner");
    var oSpans = document.getElementById("dots").getElementsByTagName("span");
    var spanArr = Array.from(oSpans);
    var picArr = ["img/pic1.webp", "img/pic2.jpg", "img/pic3.jpg"];
    var i = 0, timer = null;

    //右侧按钮 
    oAs[1].onclick = function () {
        i++;
        if (i === picArr.length) {
            i = 0;
        }

        // oImg.src = picArr[i];

        // for (var j = 0; j < spanArr.length; j++) {
        //     spanArr[j].className = "";//把所有的span上的类清空
        // }
        // spanArr[i].className = "on";

        change(i);

        // console.log("i", i);
    }

    // 左侧按钮
    oAs[0].onclick = function () {
        i--;
        if (i === -1) {
            i = picArr.length - 1;
        }

        // oImg.src = picArr[i];
        // for (var j = 0; j < spanArr.length; j++) {
        //     spanArr[j].className = "";//把所有的span上的类清空
        // }
        // spanArr[i].className = "on";

        change(i);

        // console.log(i);
    }

    //自动播放
    function autoPlay() {
        timer = setInterval("oAs[1].onclick()", 2000)
    }
    autoPlay();


    //光标移入 banner  自动停止 改手动
    oDivs[0].onmouseover = function () {
        clearInterval(timer);
        oAs[0].style.display = "block";
        oAs[1].style.display = "block";
    }

    //光标移出 banner  自动 
    oDivs[0].onmouseout = function () {
        autoPlay();
        oAs[0].style.display = "none";
        oAs[1].style.display = "none";
    }


    //span的单击事件

    spanArr.forEach((item, idx) => {
        item.onclick = function () {
            // for (var j = 0; j < spanArr.length; j++) {
            //     spanArr[j].className = "";//把所有的span上的类清空
            // }
            // item.className = "on";//点击哪个span  哪个span有 on 类

            i = idx;//小圆点与图片索引统一

            change(i);
            // console.log("idx", i);
            // oImg.src = picArr[i];
        }
    });

    function change(n) {
        for (var j = 0; j < spanArr.length; j++) {
            spanArr[j].className = "";//把所有的span上的类清空
        }
        spanArr[n].className = "on";//给当前的span添加类
        oImg.src = picArr[n];//修改索引对应的图片路径
    }



</script>

</html>