封装轮播图

最新推荐文章于 2023-11-18 15:17:50 发布

weixin_33936401

最新推荐文章于 2023-11-18 15:17:50 发布

阅读量337

点赞数

文章标签： json

原文链接：https://juejin.im/post/5c728928e51d4575b43b05fe

版权

<!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;
            position: relative;
            margin: 100px auto;
            border: 3px solid #ccc;
            /* overflow: hidden; */
        }

        .swiper {
            position: absolute;
            left: 0;
            top: 0;
            width: 2000px;
            height: 300px;
        }

        .swiper .item {
            width: 500px;
            height: 300px;
            float: left;
        }

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

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

        .pagenation li.select {
            background: black;
        }
    </style>
</head>

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

    <div class="container" id="container1">
        <div class="swiper" id="swiper1">
            <div class="item" style="background: blue;" data-index="0">1</div>
            <div class="item" style="background: red;" data-index="1">2</div>
            <div class="item" style="background: yellow;" data-index="2">3</div>
        </div>
        <ul class="pagenation" id="pagenation1">
            <li class="select"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script src="utils.js"></script>
    <script src="animate.js"></script>
    <script>
        
        function _swiper(container, swiper, items, pagenation, oLis) {
            // var container = document.getElementById("container"); // 容器盒子
            // var swiper = document.getElementById("swiper"); // 图片列表盒子
            // var items = swiper.getElementsByClassName("item"); // 所有的图片
            // var pagenation = document.getElementById("pagenation"); // 分页器容器
            // var oLis = pagenation.getElementsByTagName("li"); // 点
            var itemW = items[0].offsetWidth; // 每张图片的宽度

            var step = 1;

            // clone元素，
            swiper.appendChild(items[0].cloneNode(true)); // 降低一个图片克隆放到了末尾
            swiper.insertBefore(items[items.length - 2].cloneNode(true), items[0]);
            swiper.style.width = items.length * itemW + "px";
            swiper.style.left = -step * itemW + "px";

            // 1、自动轮播的功能
            var timer = setInterval(function () {
                step++;
                // if(step >= 4){
                //     step = 0;
                // }
                // swiper.style.left = -step*itemW + "px";

                // for(let i = 0; i < oLis.length; i++){
                //     oLis[i].classList.remove("select");
                // }
                // oLis[step].classList.add("select");
                renderImg(); // 切换图片的方法
                renderPagenation(); // 切换小远点
            }, 2000)

            // 2、鼠标画上停止动画，移开继续动画
            container.onmouseover = function () {
                clearInterval(timer);
            };
            container.onmouseout = function () {
                timer = setInterval(function () {
                    step++;
                    renderImg(); // 切换图片的方法
                    renderPagenation(); // 切换小远点
                }, 2000)
            };

            // 3、小圆点和图片联动
            for (let i = 0; i < oLis.length; i++) {
                oLis[i].onclick = function () {
                    step = i + 1;
                    renderImg(); // 切换图片的方法
                    renderPagenation(); // 切换小远点
                }
            }

            // 渲染图片
            function renderImg() {
                if (step > items.length-1) {
                    step = 1;
                    swiper.style.left = -step * itemW + "px";
                    step++;
                }
                zfAnimate(swiper, { left: -step * itemW }, 1000);
                // swiper.style.left = -step*itemW+"px";
            };

            // 渲染小圆点
            function renderPagenation() {
                var index = null; // 先远点的索引
                // 1、图片的索引-1等于小圆点的索引（所引值1-4）
                // oLis.length == items.length-2 ，
                if (step >= 1 && step <= oLis.length) {
                    index = step - 1; // 小圆点
                }
                // 2、图片索引length-1，小圆点的索引是0；
                if (step == items.length-1) {
                    index = 0;
                }
                // 3、图片索引是0，小圆点是最大的索引
                if (step == 0) {
                    index = oLis.length-1;
                }

                for (let i = 0; i < oLis.length; i++) {
                    oLis[i].classList.remove("select");
                }
                oLis[index].classList.add("select");
            }
        }


        var container = document.getElementById("container"); // 容器盒子
        var swiper = document.getElementById("swiper"); // 图片列表盒子
        var items = swiper.getElementsByClassName("item"); // 所有的图片
        var pagenation = document.getElementById("pagenation"); // 分页器容器
        var oLis = pagenation.getElementsByTagName("li"); // 点
        _swiper(container, swiper, items, pagenation, oLis);

        var container1 = document.getElementById("container1"); // 容器盒子
        var swiper1 = document.getElementById("swiper1"); // 图片列表盒子
        var items1 = swiper1.getElementsByClassName("item"); // 所有的图片
        var pagenation1 = document.getElementById("pagenation1"); // 分页器容器
        var oLis1 = pagenation1.getElementsByTagName("li"); // 点
        _swiper(container1, swiper1, items1, pagenation1, oLis1);
    </script>
</body>
</html>
复制代码

banner.json

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

图片自己搞

weixin_33936401

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
封装轮播图

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫