一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jquery广告无缝轮播实例

时间:2017-01-07 编辑:简简单单 来源:一聚教程网

本文实例为大家演示了jquery广告无缝轮播效果,供大家参考,具体内容如下

需要自行添加五张图片和引用jquery库

纵向轮播实例:

 
 代码如下 复制代码
jquery广告无缝轮播代码演示
 
 li{
  list-style:none;
 }
 .mains{
  width:700px;
  margin:0 auto;
 }
 .mains .title{
  font-size:25px;
  padding:10px 0 5px 50px;
 }
 .g1{
  width:380px;
  height:180px;
 }
javascript"src="js/jquery.min.js">
 
  jquery广告无缝轮播代码演示
  
   
    
     
    
     
    
     
    
     
    
     
 
    
     
    
     
    
     
    
     
    
     
   
  
 
 
  var PlaceTop = parseInt($("#ulID").css("top"));
  var int;
  function moveUL(){
   var ulID = $("#ulID");
   PlaceTop = --PlaceTop;
   if(PlaceTop == -900)
   {
    PlaceTop = 0;
   }
   ulID.css("top",PlaceTop);
   if(PlaceTop < -900){
    alert("Eror!");
    clearInterval(int);
   }
  }
  int=setInterval("moveUL()",10);
  $(".g1").hover(function(){
   clearInterval(int);
  },function(){
   int=setInterval("moveUL()",10);
  });
 
 

热门栏目