文字上下自动循环滚动-10

<div class="main">
     <div class="h_1">
                    <ul class="hhh">
                           <li><span><a href="#" target="_blank">2017年2月4日</a></span>今天天气晴朗,微风,适合出游</li>
                           <li><span><a href="#" target="_blank">2017年2月4日</a></span>今天天气晴朗,微风,适合出游</li>
                           <li><span><a href="#" target="_blank">2017年2月4日</a></span>今天天气晴朗,微风,适合出游</li>
                           <li><span><a href="#" target="_blank">2017年2月4日</a></span>今天天气晴朗,微风,适合出游</li>
                           <li><span><a href="#" target="_blank">2017年2月4日</a></span>今天天气晴朗,微风,适合出游</li>
                           <li><span><a href="#" target="_blank">2017年2月4日</a></span>今天天气晴朗,微风,适合出游</li>
                           <li><span><a href="#" target="_blank">2017年2月4日</a></span>今天天气晴朗,微风,适合出游</li>
                           <li><span><a href="#" target="_blank">2017年2月4日</a></span>今天天气晴朗,微风,适合出游</li>
                           <li><span><a href="#" target="_blank">2017年2月5日</a></span>今天天气晴朗,微风,适合出游</li>
                           <li><span><a href="#" target="_blank">2017年2月4日</a></span>今天天气晴朗,微风,适合出游</li>
                           <li><span><a href="#" target="_blank">2017年2月6日</a></span>今天天气晴朗,微风,适合出游</li>
                    </ul>
    </div>
</div>

.main{ clear:both; 500px; height:240px; overflow:hidden; margin:50px auto; background:#FFF; padding:10px;}
.h_1{ height:240px; overflow:hidden; background:#ddffdd;}
.main ul li{ text-indent:10px; height:30px; line-height:30px;color:#333;}
.main ul li span{ float:right; margin-right:10px;}
.main ul li a{ text-decoration:none; color:#666;}
.main ul li a:hover{ color:#000;}

$(document).ready(function(){
 var tm;
          $('.main').hover(function(){
              clearInterval(tm)
          },function(){
              tm=setInterval(function(){
                     $h=$('.hhh li:first').height();
                     $('.hhh').stop().animate({'marginTop':-$h},500,function(){
                     $('.hhh li:first').appendTo($('.hhh'));
                     $('.hhh').css({'marginTop':0});
                     $('.hhh li:first').hide();
                     $('.hhh li:first').show();
            })
            },1000)
          }).trigger('mouseout');
          
          //焦点图
          /*function ft(li_w,wrap_1,num_h,width_1,hover_1){
                  var liw=li_w.width();
                  var repeat;
                  var index=0;
                  var length_1=li_w.length;
                  wrap_1.hover(function(){
                           clearInterval(repeat)
                  },function(){
                          repeat=setInterval(function(){
                              index++;
                              if(index==length_1)
                              { index=0};
                          ht(index)
                          },3000)
                   }).trigger("mouseout");

               num_h.mouseover(function(){
                   index=num_h.index(this);
               ht(index)
         });
 
              function ht(index){
                     width_1.stop().animate({"marginLeft":-liw*index});                  
                     num_h.eq(index).addClass(hover_1).siblings().removeClass(hover_1);
               };
       };
      ft($(".wwul li"),$(".bannerbox"),$(".olbg li"),$(".wwul"),("hbg1"));
           */
        
    
});

原文地址:https://www.cnblogs.com/su1637/p/8203447.html