-淘宝-首页轮播-3.0 Ajax

-淘宝-首页轮播-3.0 Ajax

Ajax远程拉取地址：https://www.easy-mock.com/

<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/5d2fd2296736a5487dce55ff/list", {}, function (obj) {
            //将模拟数据转换为页面标签元素
            console.log(obj.data.items)
            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 start() {
            index++;
            timer = setInterval(() => {
                var span = $(".control>span").eq(index == 4 ? 0 : index);
                span.addClass("s");
                span.siblings(".s").removeClass("s");
                if (index == 4) {
                    span = $(".control>span").eq(0);
                    $(".player").css("transform", "translateX(-2080px)");
                    setTimeout(() => {
                        $(".player").css("transition", "none");
                        $(".player").css("transform", "translateX(0px)");
                        index = 1;
                    }, 500);
                } else {
                    span = $(".control>span").eq(index);
                    $(".player").css("transition", "all 0.5s ease");
                    $(".player").css("transform", `translateX(${-index++ * 520}px)`);
                }
            }, 3000);
        }
        //封装自动轮播关闭函数
        function stop() {
            clearInterval(timer);
        }
        //页面初始化启动自动轮播
        start();
        //鼠标移至control区域关闭自动轮播，启动手动点击播放
        $(".control").hover(stop, start);
        //点击control内控制点实现点击播放
        $(".control>span").click(function () {
            index = $(this).index();
            $(this).addClass("s");
            $(this).siblings(".s").removeClass('s');
            $(".player").css("transform", `translateX(${-index * 520}px)`);
        });
    </script>