-淘宝-首页轮播-1.0 无手动

最新推荐文章于 2025-09-25 14:46:38 发布

原创最新推荐文章于 2025-09-25 14:46:38 发布 · 371 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #淘宝页面轮播

前端同时被 3 个专栏收录

10 篇文章

订阅专栏

页面轮播

5 篇文章

订阅专栏

定时器

2 篇文章

订阅专栏

本文介绍了一种基于CSS和JavaScript实现的淘宝首页轮播图效果。通过设置定时器自动切换图片，并使用CSS进行平滑过渡，同时展示了如何通过jQuery控制DOM元素实现轮播效果。

-淘宝-首页轮播-1.0

单纯轮播，无手动操作

样式css

*{
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif,"幼体";
}
#box{
    position: relative;
    margin: 50px auto 0;
    width: 520px;
    height: 280px;
    border: #DDD 1px solid;
    display: flex;
    overflow: hidden;
}
.player{
    width: 2600px;
    height: 280px;
    background-color: lavenderblush;

    display: flex;
    transition: all 0.5s ease;
}
#box>.player>a{
    flex-grow: 1;
    background-color: lawngreen;
    background: #EEE center no-repeat;
    background-size: cover;
}
.control{
    position: absolute;
    left: 50%;
    bottom: 20px;
    margin-left: -55px;
    width: 110px;
    height: 20px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.3);
    display: flex;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
}
span{
    font-size: 18px;
    color: white;
}
#box>.control>span.s{
    color:#F40;
}

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 = [];
        //将模拟数据转换为页面标签元素（添加图片）
        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(""));
        //自动轮播启动函数
        let index = 1;
        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)`);//index++先运算后赋值
            }
        }, 3000);
    </script>