Html5移动端获奖无缝滚动动画实现示例

<div class="roll" id="roll">
    <ul>
         <li>第一个结构</li>
         <li>第二个结构</li>
         <li>第三个结构</li>
         <li>第四个结构</li>
         <li>第五个结构</li>
         <li>第六个结构</li>
         <li>第七个结构</li>
         <li>第八个结构</li>
    </ul>
</div>

{
    margin:0;
    padding:0;
}
.roll{
    margin: 100px auto;
    width: 200px;
    height: 40px;
    overflow:hidden;
    border: 1px solid aquamarine;
}
.roll ul{
    list-style: none;
}
.roll li{
    line-height:20px;
    font-size:14px;
    text-align:center;
}

    $(document).ready(function(){
            setInterval(function(){  // 添加定时器，每1.5s进行转换
                $("#roll").find("ul:first").animate({
                        marginTop:"-40px"  //每次移动的距离
                },500,function(){   // 动画运动的时间
                        //$(this)指的是ul对象，
                        //ul复位之后把第一个元素和第二个元素插入
                        //到ul的一个元素的位置
                        $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
                        $(this).find("li:first").appendTo(this);
                });
            },1500)
        });

<div class="roll" id="roll">
        <ul>
             <li>第一个结构</li>
             <li>第二个结构</li>
             <li>第三个结构</li>
             <li>第四个结构</li>
             <li>第五个结构</li>
             <li>第六个结构</li>
             <li>第七个结构</li>
             <li>第八个结构</li>
             <li>第一个结构</li>
             <li>第二个结构</li>
        </ul>
</div>

/这里不做兼容性处理/
.roll ul{
    list-style: none;
    animation: ani 5s  linear infinite;  /动画ani，5s，循环匀速播放/
}
@keyframes ani{  
    0%{
        margin-: 0;
    }
    12.5%{
        margin-: 0;
    }
    25%{
        margin-: -40px;
    }
    37.5%{
        margin-: -40px;
    }
    50%{
        margin-: -80px;
    }
    62.5%{
        margin-: -80px;
    }
    75%{
        margin-: -120px;
    }
    87.5%{
        margin-: -120px;
    }
    100%{
        margin-: -160px; /是一个，这样可以打断动画/
    }
}

   function addKeyFrame(){
       var ulObj = $("#roll ul"),  //获取ul对象
             length = $("#roll li").length,  //获取li数组长度
             per = 100 / (length / 2  2 );  //计算中间间隔百分比
       // 拼接字符串
       var keyframes = `\    
       @keyframes ani{`;
       for(var i = 0 ; i<=length ; i++ ){
           keyframes+=`${i  per}%{
                           margin-: ${i % 2 == 0 ? -i  20 : -(i - 1)  20}px;
                       }`;
       }
       keyframes+='}';
       var liFirst = $("#roll li:first"),   //获取第一个元素
           liSec = liFirst.next();    //获取第二个元素
       ulObj.append(liFirst.clone()).append(liSec.clone());   //将两个元素插入到ul里面
       $("<style>").attr("type","text/css").html(keyframes).appendTo($("head"));    //创建style标签把关键帧插入到头部
       ulObj.css("animation","ani 5s linear infinite");  //给ul添加css3动画
   }
   addKeyFrame();

var timer,;
function roll(){
    var ulObj = $("#roll").find("ul"),
        length = $("#roll li").length,  
        liFirst = $("#roll").find("li:first");
        liSec = liFirst.next();
    ulObj.append(liFirst.clone()).append(liSec.clone());  //把第一个第二个都添加到<ul>标签中
    clearInterval(timer);
    timer = setInterval(function(){  //设置定时器
        var  = ulObj.css("margin-");
         = +.slice(0,-2);
        if( != -(20  length)){  //获取现在的高度如果没有到就上移
             -= 40;
            ulObj.css({"-webkit-transition":"all 1s","transition":"all 1s","margin-":});
        }else{  //如果到了就迅速到零
             = 0;
            ulObj.css({"-webkit-transition":"none","transition":"none","margin-":});
            setTimeout(function(){  //这里加一个延时器，也是要放在队列去执行，为了避免两个动画合并
                 -= 40;
                ulObj.css({"-webkit-transition":"all 1s","transition":"all 1s","margin-":});
            },0)
        }
    },2000);
}

roll();