在css使用动画可以实现简单的轮播图,但如今已经学习了JS,用JS来写轮播图更加方便快捷。今天就带着大家来实现轮播图。话不多说我们直接看代码:

 这是css部分,进行了简单的样式操作接下来就进入js阶段:

 运行结果如下:

在这小编把代码直接发给大家,仅供参考:

    <title>轮播图</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            list-style: none;

        }

       

        .wrap {

            width: 500px;

            height: 350px;

            margin: 0 auto;

            position: relative;

            background-color: orange;

            background-position: center center;

            background-size: cover;

        }

       

        .arraw {

            width: 30px;

            height: 30px;

            background-color: rgba(0, 0, 0, .7);

            color: #fff;

            text-align: center;

            position: absolute;

            line-height: 30px;

            top: 160px;

            border-radius: 50%;

        }

       

        .prev {

            left: 10px;

        }

       

        .prev:hover {

            cursor: pointer;

        }

       

        .next {

            right: 10px;

        }

       

        .next:hover {

            cursor: pointer;

        }

       

        .dots {

            position: absolute;

            width: 160px;

            height: 20px;

            background-color: rgba(0, 0, 0, .7);

            bottom: 10px;

            left: 170px;

            display: flex;

            justify-content: space-around;

            align-items: center;

            border-radius: 10px;

        }

       

        .dot {

            width: 10px;

            height: 10px;

            background-color: rgba(255, 255, 255, .7);

            border-radius: 50%;

        }

       

        .dot:hover {

            cursor: pointer;

        }

       

        .now {

            background-color: #fff;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <div class="arraw prev">

            < </div>

                <div class="arraw next"> > </div>

                <div class="dots">

                    <div class="dot now"></div>

                    <div class="dot"></div>

                    <div class="dot"></div>

                    <div class="dot"></div>

                </div>

        </div>

</body>

<script>

    var data = ['https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F130220%2F17%2F17-niutuku.com-439.jpg&refer=http%3A%2F%2Fimg2.niutuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655342711&t=02a3a61ac81b371454d8957accbb3157',

        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fc8%2F05%2F06%2Fc805066d0b20adf869ac39ef3ce0a2fd.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655342711&t=c4e293679b5c8aa638e8666d2036837c',

        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F5b%2F78%2Fcb%2F5b78cb5c9b666c1bd4845c31c83a544d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655342711&t=0ec37ea61a60009897d5a353b8e9871f',

        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdesk-fd.zol-img.com.cn%2Ft_s960x600c5%2Fg2%2FM00%2F0A%2F0E%2FChMlWV7Ny86IKavgABdq99NojwIAAPgxwETpvoAF2sP356.jpg&refer=http%3A%2F%2Fdesk-fd.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655342711&t=12383ff3a9f62c4b81e8d22a43969bfb'

    ]

    var dWrap = document.querySelector('.wrap');

    var dPrev = document.getElementsByClassName('prev')[0];

    var dNext = document.getElementsByClassName('next')[0];

    var dots = document.querySelectorAll('.dot');

    var showIndex = 0; //当前显示图片的下标

    var timer = null;

    timer = setInterval(function() {

        dots[showIndex].classList.remove("now");

        showIndex = showIndex + 1;

        //越界处理

        showIndex = showIndex === data.length ? 0 : showIndex;

        changeBg(data[showIndex]);

        dots[showIndex].classList.add("now");

    }, 2000)

    //点击事件

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

        dots[i].index = i;

        dots[i].onclick = function() {

            dots[showIndex].classList.remove("now");

            showIndex = this.index;

            changeBg(data[showIndex]);

            dots[showIndex].classList.add("now");

        }

    }

    dPrev.onclick = function() {

        //修改dot状态

        // dots[showIndex].className = 'dot';

        dots[showIndex].classList.remove("now");

        showIndex = showIndex - 1;

        showIndex = showIndex === -1 ? data.length - 1 : showIndex;

        changeBg(data[showIndex]);

        dots[showIndex].classList.add("now");

    }

    dNext.onclick = function() {

            dots[showIndex].classList.remove("now");

            showIndex = showIndex + 1;

            //越界处理

            showIndex = showIndex === data.length ? 0 : showIndex;

            changeBg(data[showIndex]);

            dots[showIndex].classList.add("now");

        }

        //改变dWrap背景图

    function changeBg(pic) {

        dWrap.style.backgroundImage = `url(${pic})`;

        // 改变指示点

    }

    changeBg(data[0]);

</script>

</html>

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐