向上滚动 

var awardsList = $('#sep2016fList');

  if(awardsList.find('li').size()>4){
    onescroll();
  }

  function onescroll(){
      var oul=awardsList;
      function c(){
          oul.animate({marginTop:'-1.75rem'},800,'ease-out',function(){
              $(this).css({marginTop:'0px'}).find('li:first').appendTo(this); 
              console.log($(this),this);
          });
      }
      setInterval(c,2000);
  }
<ul id="sep2016fList">
　　<li><span>8元现金券</span>139****0001</li>
　　<li><span>88元现金券</span>139****0001</li>
　　<li><span>38元现金券</span>139****0001</li>
　　<li><span>18元现金券</span>139****0001</li>
　　<li><span>8元现金券</span>139****0001</li>
　　<li><span>38元现金券</span>139****0001</li>
　　<li><span>8元现金券</span>139****0001</li>
　　<li><span>38元现金券</span>139****0001</li>
　　<li><span>68元现金券</span>132****0001</li>
</ul>

 向左滚动

var awardsList = $('#ul');
if(awardsList.find('li').size()>4){
   onescroll();
}

function onescroll(){
   var oul=awardsList;
   function c(){
       oul.animate({marginLeft:'-87px'},2000,'linear',function(){
             $(this).css({marginLeft:'0px'}).find('li:first').appendTo(this); 
       });
   }
    setInterval(c,2000);
}

 

<!doctype html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />            
        <meta name="keywords" content="关键字1,关键字2" />        
        <meta name="Description" content="描述信息" />
        <title>循环滚动</title>
        <!--CSS/JS-->
        <style type="text/css">
            *{margin:0;padding:0;}
            ul,li{list-style:none;display:block;}
            #scrollBox{height:150px;width:300px;margin:100px auto;background:#f09;overflow:hidden;}
            #scrollBox #con1,#con2{width:280px;float:left;}
            #scrollBox li{height:15px;line-height:15px;text-align:center;}
            
        </style>
        
        
    </head>
 <body>
    <!--div-->
    <div id="scrollBox">
        <ul id="con1">
            <li>我是测试内容1！！<li>
            <li>我是测试内容2！！<li>
            <li>我是测试内容3！！<li>
            <li>我是测试内容4！！<li>
            <li>我是测试内容5！！<li>
            <li>我是测试内容6！！<li>
            <li>我是测试内容7！！<li>
            <li>我是测试内容8！！<li>
            <li>我是测试内容9！！<li>
        </ul>
        <ul id="con2"></ul>
    </div>
    <script type="text/javascript">            
                var area =document.getElementById('scrollBox');
                var con1 = document.getElementById('con1');
                var con2 = document.getElementById('con2');
                con2.innerHTML=con1.innerHTML;
                function scrollUp(){
                if(area.scrollTop>=con1.offsetHeight){
                    area.scrollTop=0;
                }else{
                    area.scrollTop++
                }
                }                
                var time = 50;
                var mytimer=setInterval(scrollUp,time);
                area.onmouseover=function(){
                    clearInterval(mytimer);
                }
                area.onmouseout=function(){
                    mytimer=setInterval(scrollUp,time);
                }
        </script>
 </body>
 
</html>

 

posted @ 2016-09-02 18:06  蛋Mrs炒饭  阅读(159)  评论(0)  编辑  收藏  举报