仿小米动态轮播图

奶油味的泡芙

已于 2022-04-24 14:41:38 修改

阅读量328

点赞数 1

文章标签：前端 html5 css3 javascript

于 2022-04-24 14:02:44 首次发布

本文链接：https://blog.csdn.net/qq_53385064/article/details/124379671

版权

HTML代码：

<body>
    <div class="swiper">
        <a href="javascript:;" class="left-button"></a>
        <a href="javascript:;" class="right-button"></a>
        <ol class="swiper-focus">
        </ol>
        <ul class="swiper-img">
            <li>
                <a href="#">
                    <img src="../images/XiaomiOne.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../images/XiaomiTwo.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../images/XiaomiThree.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../images/XiaomiFour.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../images/XiaomiFive.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../images/XiaomiSix.jpg" alt="">
                </a>
            </li>

        </ul>
    </div>
</body>

CSS代码：

<style>
    @font-face {
        font-family: "icomoon";
        src: url('fonts/icomoon.eot?7kkyc2');
        src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
            url('fonts/icomoon.woff?7kkyc2') format('woff'),
            url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
        font-style: normal;
        font-weight: normal;
        font-display: block;
    }

    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    a {
        text-decoration: none;
    }

    .swiper {
        position: relative;
        width: 1226px;
        height: 460px;
        margin: 100px auto;
        overflow: hidden;
    }

    .left-button,
    .right-button {
        position: absolute;
        font-family: "icomoon";
        width: 41px;
        height: 69px;
        top: 50%;
        margin-top: -35px;
        color: #d7d7d7;
        line-height: 69px;
        text-align: center;
        font-size: 30px;
        z-index: 2;
    }

    .left-button {
        left: 0;
    }

    .right-button {
        right: 0;
    }

    .right-button:hover,
    .left-button:hover {
        color: #fff;
        background-color: rgba(0, 0, 0, .3);
    }

    .swiper-focus {
        position: absolute;
        width: 400px;
        left: auto;
        right: 30px;
        bottom: 20px;
        text-align: right;
        z-index: 2;
    }

    .swiper-focus li {
        display: inline-block;
        margin: 0 4px;
        width: 6px;
        height: 6px;
        border: 2px solid #fff;
        border-color: hsla(0, 0%, 100%, .3);
        border-radius: 10px;
        overflow: hidden;
        background: rgba(0, 0, 0, .3);
        cursor: pointer;
    }

    .swiper-focus .current {
        background: hsla(0, 0%, 100%, .4);
        border-color: rgba(0, 0, 0, .4);
    }

    .swiper-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 750%;
        z-index: 1;
    }

    .swiper-img li {
        float: left;
    }

    .swiper-img img {
        width: 1226px;
        height: 460px;
    }
</style>

JS代码：

<script>
    window.addEventListener("load", function () {
        //1.根据图片的多少动态生成小圆圈
        var swiper = document.querySelector(".swiper");
        var swiperimg = document.querySelector(".swiper-img");
        var swiperfocus = document.querySelector(".swiper-focus");
        var rbutton = document.querySelector(".right-button");
        var lbutton = document.querySelector(".left-button");
        var swiperWidth = swiper.offsetWidth;

        for (var i = 0; i < swiperimg.children.length; i++) {
            //创建li
            var li = document.createElement("li");
            //通过自定义属性记录当前小圆圈索引号
            li.setAttribute("index", i);
            //2.把li插入ol中
            swiperfocus.appendChild(li);
            //4.利用排他思想在生成小圆圈的同时绑定点击事件
            li.addEventListener("click", function () {
                for (var i = 0; i < swiperfocus.children.length; i++) {
                    swiperfocus.children[i].className = "";
                }
                this.className = "current";
                //5.点击小圆圈，移动ul更换图片
                //ul移动距离=小圆圈索引号*图片宽度；
                var index = this.getAttribute("index");
                num = index;
                circle = index;
                animate(swiperimg, -index * swiperWidth);
            })
        }

        //3.把ol里面第一个li类名设置为current
        swiperfocus.children[0].className = "current";
        //6.克隆第一张图片放到ul最后边
        var first = swiperimg.children[0].cloneNode(true);
        swiperimg.appendChild(first);
        //7.点击右侧按钮使图片滚动
        var num = 0;
        var circle = 0;
        rbutton.addEventListener("click", function () {
            if (num == swiperimg.children.length - 1) {
                swiperimg.style.left = 0;
                num = 0;
            }
            num++;
            animate(swiperimg, -num * swiperWidth);
            //8.点击右侧按钮，小圆圈跟随一起变动
            circle++;
            if (circle == swiperfocus.children.length) {
                circle = 0;
            }
            circleChange();
        });

        //点击左侧按钮图片的变化
        lbutton.addEventListener("click", function () {
            if (num == 0) {
                num = swiperimg.children.length - 1;
                swiperimg.style.left = -num * swiperWidth + "px";
            }
            num--;
            animate(swiperimg, -num * swiperWidth);
            //8.点击右侧按钮，小圆圈跟随一起变动
            circle--;
            // if (circle < 0) {
            //     circle = swiperfocus.children.length - 1;
            // }
            circle = circle < 0 ? swiperfocus.children.length - 1 : circle;
            circleChange();
        });

        function circleChange() {
            //先清除其他小圆圈current类名
            for (var i = 0; i < swiperfocus.children.length; i++) {
                swiperfocus.children[i].className = "";
            }
            swiperfocus.children[circle].className = "current";
        }

        //9.自动播放轮播图
        var timer = setInterval(function () {
            rbutton.click();
        }, 2000);

        //10.鼠标经过轮播图就停止自动播放，离开再开始自动播放
        swiper.addEventListener("mouseenter", function () {
            clearInterval(timer);
            timer = null;
        })
        swiper.addEventListener("mouseleave", function () {
            timer = setInterval(function () {
                rbutton.click();
            }, 2000);
        })
    })
</script>

js部分动画函数的引入：

//动画函数
function animate(obj, target, callback) {
    //先清除以前的定时器，只保留当前一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        //步长值写到定时器里边，把步长值改为整数
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            //停止动画
            clearInterval(obj.timer);
            //回调函数写到定时器结束里边
            if (callback) {
                //调用函数
                callback();
            }
        }
        obj.style.left = obj.offsetLeft + step + "px";
    }, 15);
}