-淘宝-首页轮播-2.0 自动手动

-淘宝-首页轮播-2.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 items = [
            {
                imgUrl:"",//图片路径
                href:""//图片链接
            },//第一张和最后一张图片
            {
                imgUrl:"",
                href:""
            },//要插入的第四张图片
            {
                imgUrl:"",
                href:""
            },//要插入的第三张图片
            {
                imgUrl:"",
                href:""
            }//要插入的第二张图片
        ];
        let as = []; index = 0; let timer;
        //将模拟数据转换为页面标签元素
        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(""));
        //封装自动轮播启动函数，定时器赋值timer
        function start() {  
            timer = setInterval(() => {
                var span = $(".control>span").eq(index == 4 ? 0 : index);
                span.addClass("s");
                span.siblings(".s").removeClass("s"); 00
                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)`);
                    index++;
                }
            }, 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>