javascript淡入淡出效果的轮播图

最新推荐文章于 2021-06-21 13:26:22 发布

原创最新推荐文章于 2021-06-21 13:26:22 发布 · 315 阅读

CC 4.0 BY-SA版权

本文介绍了一种轮播图的设计与实现方法，详细解释了如何使用HTML和CSS进行布局，并通过JavaScript实现了图片切换的功能。文章还展示了如何制作轮播按钮及指示点，以及它们在用户交互中的作用。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        ul, ol { list-style: none;}
        a {border: none;text-decoration: none;color: inherit;}
        * {margin: 0;padding: 0;}
        .banner{
            position: relative;
            width: 800px;
            height: 450px;
            margin: 100px auto;
            box-shadow: 0 0 10px 0 #000;
        }
        .banner .pic a img{
            position: absolute;
            left: 0;
            top: 0;
            width: 800px;
            height: 450px;
            opacity: 0;
            transition: 0.5s;
        }
        .banner .pic a img.on{
            opacity: 1;
        }

        .banner .btn p{
            position: absolute;
            top: calc(50% - 27px);
            width: 55px;
            height: 55px;
            cursor: pointer;
        }
        .banner .btn p:hover{
            opacity: 0.7;
        }
        .banner .btn p:nth-child(1){
            left: 10px;
             background: url("images/btnL.png");
         }
        .banner .btn p:nth-child(2){
            right: 10px;
            background: url("images/btnR.png");
        }
        .banner ol{
            position: absolute;
            bottom: 10px;
            left: calc(50% - 100px);
        }
        .banner ol li{
            float: left;
            width: 30px;
            height: 30px;
            font: bold 20px/30px "";
            color: #fff;
            text-align: center;
            background: #ccc;
            margin: 0 5px;
            border-radius: 50%;
            cursor: pointer;
        }
        .banner ol li.on{
            background: orangered;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="banner">
        <div class="pic">
            <a href=""><img src="images/0.jpg" alt="" class="on"></a>
            <a href=""><img src="images/1.jpg" alt=""></a>
            <a href=""><img src="images/2.jpg" alt=""></a>
            <a href=""><img src="images/3.jpg" alt=""></a>
            <a href=""><img src="images/4.jpg" alt=""></a>
        </div>
        <div class="btn">
            <p></p>
            <p></p>
        </div>
        <ol class="dot">
            <li class="on">0</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </div>

    <script>
        var aBtn = document.querySelectorAll(".banner .btn p");
        var aImg = document.querySelectorAll(".banner .pic img");
        var aDot = document.querySelectorAll(".banner .dot li");
        var length = aImg.length;
        var idx = 0;  //索引

        /*给按钮添加点击事件*/
        aBtn[1].onclick = function () {
            aImg[idx].className = "";
            idx++;
            if(idx > length-1) idx = 0;
            aImg[idx].className = "on";
            change(idx);
        }
        aBtn[0].onclick = function () {
            aImg[idx].className = "";
            idx--;
            if(idx < 0) idx = length - 1;
            aImg[idx].className = "on";
            change(idx);
        }

        /*给小圆点注册点击事件*/
        for( var i=0; i<length; i++ ){
            (function (m) {
                aDot[m].onclick = function () {
                    aImg[idx].className = "";
                    idx = m;
                    aImg[idx].className = "on";
                    change(idx);
                }
            })(i);
        }

        /*将变化的封装到函数里面*/
        function change(index) {
            for( var i=0; i<length; i++ ){
                aDot[i].className = "";
            }
            aDot[index].className = "on";
        }
    </script>
</body>
</html>