渐隐渐现轮播图(通过opacity去控制)-CSDN博客

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        .container {
            width: 500px;
            height: 300px;
            border: 3px solid #ccc;
            position: relative;
        }

        .swiper {
            position: relative;
            width: 500px;
            height: 300px;
        }

        .item {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            font-size: 100px;
            text-align: center;
            line-height: 300px;
            transition: all 1s;
        }

        .item.select {
            opacity: 1;
        }

        .pagenation {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 10px;
        }

        .pagenation li {
            width: 20px;
            height: 20px;
            border-radius: 20px;
            background: #ccc;
            float: left;
            margin: 0 10px;
        }

        .pagenation li.on {
            background: black;
        }

        #left {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%) rotateZ(-45deg);
            width: 40px;
            height: 40px;
            border-top: 6px solid black;
            border-left: 6px solid black;
        }

        #right {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%) rotateZ(135deg);
            width: 40px;
            height: 40px;
            border-top: 6px solid black;
            border-left: 6px solid black;
        }
    </style>
</head>

<body>
    <div class="container" id="container">
        <div class="swiper" id="swiper">
            <div class="item select" style="background: yellow">1</div>
            <div class="item" style="background: green">2</div>
            <div class="item" style="background: blue">3</div>
            <div class="item" style="background: red">4</div>
        </div>
        <ul class="pagenation" id="pagenation">
            <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <a href="javascript:;" id="left"></a>
        <a href="javascript:;" id="right"></a>
    </div>

    <script>
        var container = document.getElementById("container");
        var pagenation = document.getElementById("pagenation");
        var oLis = pagenation.getElementsByTagName("li");
        var left = document.getElementById("left");
        var right = document.getElementById("right");
        var swiper = document.getElementById("swiper");
        var items = swiper.getElementsByClassName("item");

        // 全局的索引值
        var step = 0;
        var timer = null;

        // 1、定时器
        timer = setInterval(function () {
            step++;
            if (step > 3) { // 当下一张图片不存在时，step=0
                step = 0;
            }
            renderImg();
            renderPagenation();

        }, 2000);

        // 2、点击分页器，
        for (let i = 0; i < oLis.length; i++) {
            oLis[i].onclick = function () {
                step = i;
                renderImg();
                renderPagenation();
            }
        }

        // 3、点击左右按钮
        left.onclick = function () {
            step--;
            if (step < 0) { // 当上一张图片不存在时，step=3
                step = 3;
            }
            renderImg();
            renderPagenation();
        };
        right.onclick = function () {
            step++;
            if (step > 3) { // 当下一张图片不存在时，step=0
                step = 0;
            }
            renderImg();
            renderPagenation();
        };

        // 4、鼠标划上溢出定时器移开恢复
        container.onmouseover = function () {
            clearInterval(timer);
        };
        container.onmouseout = function () {
            timer = setInterval(function () {
                step++;
                if (step > 3) { // 当下一张图片不存在时，step=0
                    step = 0;
                }
                renderImg();
                renderPagenation();

            }, 2000);
        };

        // 根据step判断显示那张图片
        function renderImg() {
            for (let i = 0; i < items.length; i++) {
                items[i].classList.remove("select");
            }
            items[step].classList.add("select");
        };

        // 根据 step判断切换分页器按钮
        function renderPagenation() {
            for (let i = 0; i < oLis.length; i++) {
                oLis[i].classList.remove("on");
            }
            oLis[step].classList.add("on");
        };

    </script>
</body>
</html>
复制代码

四张图片(自己找)

banner.json

[
  {
    "id": 1,
    "img": "img/banner1.jpg",
    "desc": "代码就是诗和远方",
    "src": "http://www.百度.com/"
  },
  {
    "id": 2,
    "img": "img/banner2.jpg",
    "desc": "把握自己 把握xz",
    "src": "http://www.百度.com/"
  },
  {
    "id": 3,
    "img": "img/banner3.jpg",
    "desc": "把握未来，掌握先机",
    "src": "http://www.百度.com/"
  },
  {
    "id": 4,
    "img": "img/banner4.jpg",
    "desc": "多的是你不知道的事儿",
    "src": "http://www.百度.com/"
  }
]
复制代码