25行js代码完美图片滚动播放

代码上图

25行代码完美图片滚播

效果展示

效果展示

原理

html+css控制
三层嵌套，第一层div层，第二层ul层，第三层li层，li层作为子项目层，支持自定义填充内容，不显示项目模板格式，ul层为滚动层，不限制长度，div层为限制层，控制ul超出隐藏，即css控制：overflow: hidden;css要设置li的定位属性为position: relative相对定位
js脚本原理：
使用定时器设定第一个li元素的left css 样式负值，当负值小于等于第一个li元素宽度负值时，即将第一个元素移至末尾实现轮播

script脚本

    $(function(){
        setInterval(AutoPlay,100);
    })
    var n = 0;
    function AutoPlay()
    {
        $(".show>ul>li").css("left","-"+n+"px");
        var left = $(".show>ul>li").css("left");
        left = left.substr(0,left.length-2);
        //console.log(left);
        if(left<=(0-$(".show>ul>li").outerWidth(true)))
            {
                n=0;
                $(".show>ul").append($(".show>ul>li"));
            }
        n+=1;
    }