轮播图简易版

最新推荐文章于 2023-03-19 21:55:33 发布

原创最新推荐文章于 2023-03-19 21:55:33 发布 · 161 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #前端

该文章描述了一个使用JavaScript和CSS实现的图片轮播效果。当鼠标不在图片上方时，图片会自动轮播且隐藏箭头；鼠标悬停时，停止轮播并显示箭头。小圆点指示当前图片位置，可点击切换。左右箭头也可控制图片切换。图片上的文字会随图片切换而同步变化。文章通过设置定时器和处理鼠标事件来达到这些功能。

需求：1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示；
当鼠标放在图片上方时，停止轮播，并且左右箭头会显示；
2.图片切换之后，图片中下方的小圆点会同时进行切换，并且点击
相应的小圆点可以切换到相应的图片上；
3.点击左右箭头可以进行左右图片的切换；
4.图片上需有介绍的文字，会随图片切换一起进行切换
原理：获取属性li是一个数组的形式，通过定时器，以修改定位的方式来实现轮播，最后一张图结束的时候进行判定重新回到第一张图的定位。
通过鼠标事件，如果鼠标在上面，会清除定时器，并且会将本来隐藏的箭头显示成块
给小圆点与箭头绑定点击事件。首先是小圆点，先设置自定义属性给与每一个原点index，在调用的时候就获取他的index，通过循环对每一个小圆点进行操作。如果点击的话就通过计算来获取本应该的定位，并且点击的时候给予class=active的选择器使其有被选中的样式
因为绑定了index 以及每一个选中的时候都有class的样式所以可以获取到有class的元素并获取到他的此时的index 将其作为数组的值，
以此来计算此时图片应该的距离以及此时应该是哪一个按钮为active

<!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>

</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
    }

    #box {
        width: 400px;
        height: 300px;
        overflow: hidden;
        position: relative;
        top: 300px;
        left: 800px
    }

    img {
        width: 400px;
        height: 300px;
    }

    #imglist {
        height: 300px;
        width: 2000px;
    }

    #imglist li {
        float: left;
        position: relative;
    }

    .bottom {
        position: relative;
        top: -74px;
        left: 155px;
    }

    .bottom li {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: 2px solid white;
        float: left;
        margin-left: 5px;
    }

    .bottom .active {
        background-color: white;
    }

    #imglist li p {
        position: absolute;
        top: 50px;
        left: 200px;
        color: white;
    }

    #left {
        position: absolute;
        background-color: white;
        color: black;
        top: 109px;
        left: 0px;
        width: 30px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: none;
    }

    #right {
        position: absolute;
        background-color: white;
        color: black;
        top: 109px;
        right: 0px;
        width: 30px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: none;
    }
</style>

<body>
    <div id="box">
        <ul id="imglist">
            <li><img src="./veer-414413576.jpg">
                <p>介绍1111111111111</p>
            </li> <!-- 1 -->
            <li><img src="./veer-417239373.jpg">
                <p>介绍2222222222222</p>
            </li>
            <li><img src="./veer-427466377.jpg">
                <p>介绍3333333333333</p>
            </li>
            <li><img src="./veer-429334234.jpg">
                <p>介绍4444444444444</p>
            </li>
            <li><img src="./veer-414413576.jpg">
                <p>介绍1111111111111</p>
            </li> <!-- 1 -->
        </ul>
        <div id="left">
            < </div>
                <div id="right">> </div>
                <ul class="bottom">
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>

                </ul>
                <span></span>
        </div>


        <script>
            var left = 0
            var timer
            var lefter = document.getElementById("left")
            var righter = document.getElementById("right")
            var index
            var xuhao
            var arr = []
            run()

            box.onmouseover = function () {
                clearInterval(timer)
                lefter.style.display = "block"
                righter.style.display = "block"
            }
            box.onmouseout = function () {
                run()
                lefter.style.display = "none"
                righter.style.display = "none"
            }
            lefter.onclick = function () {

                var xuwei = document.querySelector(".active")
                var xuhao = xuwei.dataset.index
                var dianji = document.querySelectorAll(".bottom li")

                if (xuhao != 0) {
                    dianji[xuhao].classList.remove("active")
                    dianji[xuhao - 1].classList.add("active")
                    imglist.style.marginLeft = (xuhao - 1) * (-400) + 'px'
                }

                if (xuhao == 0) {
                    dianji[xuhao].classList.remove("active")
                    dianji[3].classList.add("active")
                    imglist.style.marginLeft = -1200 + 'px'
                }

            }
            righter.onclick = function () {

                var xuwei = document.querySelector(".active")
                var xuhao = xuwei.dataset.index
                var dianji = document.querySelectorAll(".bottom li")
                console.log(xuhao)
                if (xuhao == 0) {
                    dianji[0].classList.remove("active")
                    dianji[1].classList.add("active")
                    imglist.style.marginLeft = (1) * (-400) + 'px'
                }
                if (xuhao == 1) {
                    dianji[1].classList.remove("active")
                    dianji[2].classList.add("active")
                    imglist.style.marginLeft = (2) * (-400) + 'px'
                }
                if (xuhao == 2) {
                    dianji[2].classList.remove("active")
                    dianji[3].classList.add("active")
                    imglist.style.marginLeft = (3) * (-400) + 'px'
                }

                if (xuhao == 3) {
                    dianji[xuhao].classList.remove("active")
                    dianji[0].classList.add("active")
                    imglist.style.marginLeft = 0 + 'px'
                }

            }


            function run() {


                timer = setInterval(function () {
                    imglist.style.marginLeft = left + 'px'
                    left = left - 400
                    on = left / (-400) - 1
                    dianji[on].classList.add("active")
                    if (on <= 3 && on != 0) { dianji[on - 1].classList.remove("active"); }
                    if (on == 0) { dianji[3].classList.remove("active") }


                    if (left <= -1600) {
                        left = 0

                    }
                }, 1500)
            }

            var dianji = document.querySelectorAll(".bottom li")

            for (var i = 0; i < dianji.length; i++) {

                dianji[i].dataset.index = i

                dianji[i].onclick = function () {

                    var index = this.dataset.index
                    for (m = 0; m < dianji.length; m++) {

                        dianji[m].classList.remove("active")
                    }
                    dianji[index].classList.add("active")

                    imglist.style.marginLeft = index * (-400) + 'px '

                }
            }




        </script>
</body>

</html>

在这里插入图片描述