js淡入淡出式轮播（京东轮播图）和无缝轮播（淘宝轮播图）

关注

VIP免费原创最新推荐文章于 2026-04-24 09:00:42 发布 1.8k 阅读 AI 写同款· GEO 优化 ›

原生js实现无缝轮播图思路无缝切换假设这是图片数组[0,1,2,3,4] 共5张图片，index是4的时候点击下一张，要切换成第1张，而不是从4->3->2->1->0这样滚回去，也就是说其实是这样的效果 [0,1,2,3,4,0] 实现4->0的无缝切换。从0->4也是同样的道理，0在点击上一张的时候，瞬间切换到4后面的0，然后再切换到4. 节流防抖简单来说就是打断回城，需要重新回城，节流就是cd。当最后一张图片切换到第一张图片时，快速点击会出现闪屏的现象，因此可以限制点击速阅读详情

js淡入淡出式轮播（京东轮播图）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>淡入淡出式轮播（京东轮播图）</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width:590px;
                margin: 0 auto;
            }
            .item li{
            list-style: none;
            width: 590px;
            height: 340px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;

         }
        img{
            width: 100%;
            height: 100%;
        }
        .leftBtn{
            width: 20px;
            height: 50px;
            position: absolute;
            left: 0;
            top: 130px;
        }

        .rightBtn{
            width: 20px;
            height: 50px;
            position: absolute;
            right: 0;
            top: 130px;
        }
        div{
            position: relative;
            width: 590px;
            height: 340px;
        }
        .page{
            position: absolute;
            bottom: 10px;
            left: 200px;
            height: 30px;
            /*width: 300px;*/
        }
        .page li{
            float: left;
            width: 30px;
            height: 30px;
            list-style: none;
            background: #ccc;
            border-radius: 50%;
            line-height: 30px;
            text-align: center;
            cursor:pointer;
        }

        </style>
        <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/animateBak.js"