无缝滚动 Js

js 无缝切换

CSS
.clearfix { clear: both; }
.banner { width: 500px; height: 500px; overflow: hidden; margin: 0 auto; position: relative; background: url(../img/loading.gif) no-repeat center;}
.banner ul { height: 500px;}
.banner li {position: absolute; left: 500px; top: 0; width: 500px; height: 500px; list-style: none; z-index: 5;}
.bannerspan { text-align: center; position: absolute; bottom: 10px; left: 0px; width: 500px; z-index: 11;}
.bannerspan span { display: inline-block; width: 10px; height: 10px; border-radius: 5px; background: #0ff; margin: 0 3px; cursor: pointer;}
.bannerspan span.on { background: #f0f;}

JS：$(function(){
        var li            = $(".banner li"),
            _span         = $(".bannerspan"),
            imgLength     = li.length,
            time;

        // 生成圆点
        for(var i = 0; i < imgLength; i++){
            _span.append("<span></span>");
        }
        
        // 初始 
        function init(){
            li.eq(0).css("left",0).addClass("active");
            _span.find("span").eq(0).addClass("on");
        }

        init();

        // 点击圆点事件
        _span.find("span").click(function(){
            clearInterval(time);
            run($(this).index());
        })

        // 获取当前展示的索引值 index
        function getActiveIndex(){
            var j;
            li.each(function(e){
                if($(this).hasClass("active")){
                    j = e;
                    return;
                }
            })
            return j;
        }
        run(1)

        // 公共函数
        function run(dx){
            li.eq(getActiveIndex()).stop().animate({left: -500, 'z-index': 5}, 500,function(){
                $(this).css("left",500)
            });
            li.eq(dx).stop().animate({'z-index': 10, left: 0}, 500, function(){
                $(this).addClass("active").siblings().removeClass("active").css("left",500);
            });
            _span.find("span").eq(dx).addClass("on").siblings().removeClass("on");
            dx++;

            time = setTimeout(function(){
                run(dx % imgLength)
            }, 2000)
        }
    })

截图

 

 

来源：https://www.cnblogs.com/do-it/p/3482625.html