JavaScript实现轮播图的优化版本

最新推荐文章于 2024-07-19 12:58:53 发布

梦里yf

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量54

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_64717348/article/details/130250998

版权

优化内容：代码看起来更加简洁，将利用左右按钮的选择图片和利用数字下标选择图片结合了起来。

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

        .content {
            display: flex;
            position: relative;
            width: 600px;
            margin: 100px auto;
            box-shadow: 0 0 8px;
            align-items: center;
        }

        .content img {
            width: 600px;
            height: auto;
        }

        .slider {
            position: absolute;
            display: flex;
            justify-content: space-around;
            width: 600px;
            bottom: 10px;
        }

        .slider span {
            display: inline-block;
            width: 45px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            background-color: orange;
            border-radius: 50%;
        }

        img {
            vertical-align: bottom;
        }

        .left,
        .right
        {
            position: absolute;
            font-size: 32px;
            width: 40px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: #ccc;
        }

        .left {
            left: 0;
        }

        .right {
            right: 0;
        }
    </style>
</head>
<body>
    <div class="content">
        <img src="img/pic1.png" alt="美女" id="pic">
        <div class="slider">
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </div>
        <span class="left">&lt;</span>
        <span class="right">&gt;</span>
    </div>

    <script>
        let oPic = document.querySelector("#pic");
        let oSlider = document.querySelector(".slider");
        let oLeft = document.querySelector(".left");
        let oRight = document.querySelector(".right");
        let index = 0;
        let count = 3;

        //将图片切换以及对应按钮颜色改变包装成一个函数（是回调函数，以便记住下标index值，并通过下标进行更改样式）
        function chageSlider(callback) {
            oSlider.children[index].style.backgroundColor = "orange";
            callback && callback();
            oSlider.children[index].style.backgroundColor = "pink";
            oPic.src = `img/pic${index+1}.png`;
        }

        oRight.onclick = function(e) {
            chageSlider(function() {
                index++;
                index %= count;
            });
        }

        oLeft.onclick = function(e) {
            chageSlider(function() {
                index--;
                index = (count+index) % count;
            });
        }

        oSlider.onmouseover = function (e) {
            if(e.target.tagName === "SPAN") {
               chageSlider(function() {
                index = e.target.innerText - 1;     //将用鼠标移上选择和用箭头选择关联起来
               });
            }
        }
    </script>
</body>
</html>