轮播图

Posted web--yang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了轮播图相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        body>div {
            width: 1000px;
            height: 358px;
            margin: 0 auto;

        }

        div>div {
            transform: translatey(280px);
            font-size: 50px;
            color: white;
            font-weight: bold;
        }

        p {
            display: flex;
            justify-content: space-between;
            padding: 0 30px;
            transform: translatey(65px);
        }

        .tubiao1 {
            display: inline-block;
            background-image: url(‘./123.png‘);
            width: 49px;
            height: 49px;
            /* background-position: 0 -49px; */
        }

        .tubiao2 {
            display: inline-block;
            background-image: url(‘./123.png‘);
            width: 49px;
            height: 49px;
            transform: rotateZ(180deg);
        }
    </style>
</head>

<body>

    <div>
        <div>
            <span>·</span>
            <span>·</span>
            <span>·</span>
            <span>·</span>
        </div>
        <p>
            <i class="tubiao1" id=‘1‘></i>
            <i class="tubiao2" id=‘2‘></i>
        </p>

    </div>



    <script>
        let div = document.querySelector(‘body>div‘);
        let i = 0;
        let arr = [‘./shutter_1.jpg‘, ‘./shutter_2.jpg‘, ‘./shutter_3.jpg‘, ‘./shutter_4.jpg‘];
        let discArr = document.querySelectorAll(‘span‘);  // 圆点节点
        let locnLeft = document.getElementById(‘1‘);
        let locnRight = document.getElementById(‘2‘);
        locnLeft.onmouseover = function () {
            locnLeft.style.backgroundPosition = ‘0 -49px‘;
        }
        locnLeft.onmouseout = function () {
            locnLeft.style.backgroundPosition = ‘0 0‘;
        }
        locnRight.onmouseover = function () {
            locnRight.style.backgroundPosition = ‘0 -49px‘;
        }
        locnRight.onmouseout = function () {
            locnRight.style.backgroundPosition = ‘0 0‘;
        }
        // 左边按键
        locnLeft.onclick = function () {
            i--;
            i--;
            if (i <= -1) {
                i = arr.length - 1;
            }

            for (let item of discArr) {
                item.style.color = ‘white‘;
            }
            discArr[i].style.color = ‘gray‘
            div.style.backgroundImage = `url(${arr[i]})`;
            div.style.textAlign = ‘center‘

            i++;
        }
        // 右边按键
        locnRight.onclick = function () {
            changeImg();
        }
        // 计时器鼠标移入和移出效果
        let lunboFn = () => {
            let lunbo = setInterval(function () {
                changeImg();
            }, 1000)
            div.onmouseover = function () {
                clearInterval(lunbo);
            }
            div.onmouseout = function () {
                lunboFn();
            }
        }
        // 圆点控制背景图
        for (let j = 0; j < discArr.length; j++) {
            discArr[j].onmouseover = function () {
                div.style.backgroundImage = `url(${arr[j]})`;
                for (let item of discArr) {
                    item.style.color = ‘white‘;
                }
                discArr[j].style.color = ‘gray‘
            }

        }
        // 背景图 圆点颜色切换
        let changeImg = () => {
            console.log(i);
            if (i >= arr.length) {
                i = arr.length - 1;
            }
            for (let item of discArr) {
                item.style.color = ‘white‘;
            }
            discArr[i].style.color = ‘gray‘
            div.style.backgroundImage = `url(${arr[i]})`;
            div.style.textAlign = ‘center‘
            i++;
            if (i >= arr.length) {
                i = 0;
            }
            return i;
        }
        lunboFn();






    </script>
</body>

</html>

 

以上是关于轮播图的主要内容，如果未能解决你的问题，请参考以下文章

网页HTML代码制作轮播图效果

HTML轮播图片代码，带解释

js原生 JavaScript轮播图渐变淡入淡出效果实现（附代码）

JS 轮播图（无缝连接的轮播图实现，含代码供参考）

淘宝首页宽屏图片轮播代码

网页设计中如何添加焦点切换轮播图呢