无缝滚动和轮播

一、写在前面

• 无缝滚动和轮播都是循环的执行翻页或者位移操作
• 一般无缝运行的时间间隔较小（50ms），轮播2-3s

二、无缝滚动

1. 核心：
   视窗的scrollTop或margin-top小于它的高度的时候，一直往上移，else置零（下移原理相同）；或者scrollLeft
   或margin-left小于它的宽度的时候，一直往左移，else置零（右移原理相同）

2. 调用：
   一般用t=setInterval(scrollFun,speed);

3. 停止与再运行
   eleWrap.hover(
   function() {
   clearInterval(t);
   }, function() {
   t = setInterval(scrollFun,speed);
   }
   );

4. 其他：
   为了不让移动在移动到最后一个子内容的时候出现跳闪或者空白，一般在调用移动前，移动区域内再添加一次其内容。

5. demo：

<meta charset="utf-8"/>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript"> // 滚动 function autoScroll(){ var speed = 50; var eleWrap = $("#evtAwardListWrap"), ele1 = $("#evtAwardList1"); if(ele1.html() !== "") { var html2 = "<ul>" + ele1.html() + "</ul>"; eleWrap.find("ul").eq(0).siblings().remove(); eleWrap.append(html2); } var sTop = 0; var scrollFun = function() { if(eleWrap.scrollTop() < $("#evtAwardList1").height()) { sTop ++; eleWrap.scrollTop(sTop); } else { eleWrap.scrollTop(0); sTop = 0; } } var t=setInterval(scrollFun,speed); eleWrap.hover( function() { clearInterval(t); }, function() { t = setInterval(scrollFun,speed); } ); } $(function(){ autoScroll(); }); </script>
    <div id="evtAwardListWrap" class="evt_award_list_wrap">
        <ul id="evtAwardList1">
        <li>恭喜用户334**抽中5元现金劵</li>
        <li>恭喜用户561**抽中50元现金劵</li>
        <li>恭喜用户228**抽中5元现金劵</li>
        <li>恭喜用户993**抽中5元现金劵</li>
        <li>恭喜用户468**抽中5元现金劵</li>
        <li>恭喜用户878**抽中100元现金劵</li>
        <li>恭喜用户933**抽中5元现金劵</li>
        <li>恭喜用户153**抽中50元现金劵</li>
        <li>恭喜用户335**抽中5元现金劵</li>
        <li>恭喜用户369**抽中5元现金劵</li>
        <li>恭喜用户777**抽中5元现金劵</li>
        <li>恭喜用户712**抽中满2000-150优惠劵</li>
        <li>恭喜用户648**抽中5元现金劵</li>
        <li>恭喜用户419**抽中50元现金劵</li>
        <li>恭喜用户552**抽中50元现金劵</li>
        <li>恭喜用户973**抽中5元现金劵</li>
    </ul>
    </div>
    <style type="text/css"> .evt_award_list_wrap{position: relative;width:346px;height:160px;overflow: hidden;font-size: 14px;color:#000; line-height: 26px;} </style>

三、轮播

可以改造无缝滚动的代码，当然也可以用下面的方法简单实现。

function move(){
  $(".xiao").animate({marginLeft:"-185px"},"slow",function(){
     $('.xiao li').first().appendTo($(".xiao"));
         $(".xiao").css('marginLeft',0);
     })
}

原理：
每次讲第一个子元素移到最后，父级向左移动一个子元素的宽度。（上下移动同理）

demo：

<meta charset="utf-8"/>
    <script type="text/javascript" src="jQuery.js"></script>
    <script type="text/javascript"> $(function(){ $('.xiao').width($('.xiao li').length*185); var index=0; var t=setInterval(move,2000); function move(){ $(".xiao").animate({marginLeft:"-185px"},"slow",function(){ $('.xiao li').first().appendTo($(".xiao")); $(".xiao").css('marginLeft',0); }) } $(".xiao").hover(function(){ clearInterval(t); },function(){ t=setInterval(move,2000); }) }) </script>
    <style> .part_scroll{width:1140px;/*width:370px;*/height:50px;margin:0 auto;position:relative;left:0px;z-index:2;visibility:visible;overflow:hidden;} .part_scroll0 ul li{width:150px;height:53px;float:left;margin-left:35px;} .xiao,.part_scroll0{z-index:1;/*width:3213px;*/height:53px;position:relative;cursor:pointer;} .xiao img{width: 150px;height: 50px;} li{list-style: none;} </style>
     <div class="part_scroll">
        <div class="part_scroll0">
            <ul class="xiao">
                <li><img src="images/xiao_1.jpg"></li>
                <li><img src="images/xiao_2.jpg"></li>
                <li><img src="images/xiao_3.jpg"></li>
                <li><img src="images/xiao_4.jpg"></li>
                <li><img src="images/xiao_5.jpg"></li>
                <li><img src="images/xiao_6.jpg"></li>
                <li><img src="images/xiao_7.jpg"></li>
            </ul>
        </div>
    </div>

效果地址：http://www.linked-f.com/

ps:鉴于个人经验有限，所有观点，如有异议，请直接回复讨论（请勿发表攻击言论）。
加入QQ群209952809(需回答问题，答案为csdn)；群聊更快解决问题，更happy。