-淘宝-首页轮播-4.0 最终版

最新推荐文章于 2022-10-19 23:20:17 发布

原创最新推荐文章于 2022-10-19 23:20:17 发布 · 262 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#淘宝页面轮播

前端同时被 3 个专栏收录

10 篇文章

订阅专栏

页面轮播

5 篇文章

订阅专栏

Ajax

2 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的动态轮播图效果，通过AJAX获取远程数据，并利用CSS3过渡效果实现图片平滑切换。同时支持自动轮播与手动选择。

-淘宝-首页轮播-4.0 最终版

body里

<div id="box">
        <div class="player"></div>
        <div class="control">
            <span class="s">●</span>
            <span>●</span>
            <span>●</span>
            <span>●</span>
        </div>
    </div>
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script>
        //模拟数据
        let as = [], index = 0, timer;
        // ajax 远程拉取数据
        $.getJSON("https://www.easy-mock.com/mock/5d2fd2096736a5487dce55e3/list", {}, function (obj) {
            // 将模拟数据转换为页面标签元素
            obj.data.items.forEach(function (e, i) {
                var item = `<a href="${e.href}"><img src="${e.imgUrl}" /></a>`;
                if (i == 0) {
                    as.push(item);
                    as.push(item);
                } else {
                    as.splice(1, 0, item);
                }
            });
            $(".player").html(as.join(""));
        });
        // 封装播放
        function play(tranEnable) {
            if (tranEnable) {
                $(".player").css("transition", "all 0.5s ease");
            } else {
                $(".player").css("transition", "none");
            }
            $(".player").css("transform", `translateX(${-index * 520}px)`);
        }
        // 封装样式切换
        function change() {
            var span = $(".control>span").eq(index);
            span.addClass("s");
            span.siblings(".s").removeClass("s");
        }
        // 封装自动轮播启动函数
        function start() {
            index++;
            timer = setInterval(() => {
                let temp = index;
                index = index >= 4 ? 0 : index;
                change();
                if (temp >= 4) {
                    index = temp;
                    play(true);
                    setTimeout(() => {
                        index = 0;
                        play(false);
                        index++;
                    }, 500);
                } else {
                    play(true);
                    index++;
                }

            }, 3000);
        }
        // 封装自动轮播关闭函数
        function stop() {
            clearInterval(timer);
        }
        // 页面初始化启动自动轮播
        start();
        // 鼠标移至control区域关闭自动轮播，启动手动点击播放
        $(".control").hover(stop, start);
        // 点击control内控制点实现点击播放
        $(".control>span").click(function () {
            index = $(this).index();
            change();
            play(true);
        });
    </script>