页面banner代码

(function() { 
	 var Isrun=false;					
	 func_movecustomers=function(type)
		{
			if(Isrun) return;
			Isrun=true;			
			var w=800;
			var n=$(".ul_customers").length;			
			var l=$(".ul_customers").eq(0).css("left");	
			var x=parseInt(l.substr(0,l.indexOf("px")));				
			var leng=w*(n-1);	
			if(type==1)
			{			
				if(x==-leng)
				{
				 	$(".ul_customers").eq(0).appendTo($(".div_wrap_ulcustomers"));						
					for(var i=0;i<n;i++)
					{		
					    $(".ul_customers").eq(i).css("left",((i+1)*w+x)+"px").animate({left:(i*w+x)},800,function(){Isrun=false;});
				  	}
				}	
				else
				{
					for(var i=0;i<n;i++)
					{		
					$(".ul_customers").eq(i).css("left",((i*w+x))+"px").animate({left:(i-1)*w+x},800,function(){Isrun=false;});
					}					
				}							
			}
			else			
			{
				if(x==0)
				{
				 	$(".ul_customers").eq(n-1).prependTo($(".div_wrap_ulcustomers"));						
					for(var i=0;i<n;i++)
					{		
					    $(".ul_customers").eq(i).css("left",((i-1)*w+x)+"px").animate({left:(i*w+x)},800,function(){Isrun=false;});
				  	}
				}	
				else
				{
					for(var i=0;i<n;i++)
					{								
					   $(".ul_customers").eq(i).css("left",(i*w+x)+"px").animate({left:(i+1)*w+x},800,function(){Isrun=false;});
					}					
				}				
			}			
		}	
})();

 

<div class="div_customers">
<div class="div_icon_left" onclick="func_movecustomers(1)"></div>
<div class="div_wrap_ulcustomers">
  <ul class="ul_customers">
    <li>
      <div class="div_locationImage"><img src="http://www.likelic.com/images/web/customers/logo_customer1.jpg" width="86"></div>
      <div class="div_companyName">江苏亚东朗升 </div>
      </li>
    <li>
      <div  class="div_locationImage"><img src="http://www.likelic.com/images/web/customers/logo_customer2.jpg"></div>
      <div class="div_companyName">上海亚东国际 </div>
      </li>
    <li>
      <div style="left:40px;" class="div_locationImage"><img src="http://www.likelic.com/images/web/customers/logo_customer3.jpg"></div>
      <div class="div_companyName">天运国际货运 </div>
      </li>
    <li>
      <div style="left:40px; " class="div_locationImage"><img src="http://www.likelic.com/images/web/customers/logo_customer4.jpg"></div>
      <div class="div_companyName">江苏锦弘国际         </div>
      </li>
    <li>
      <div style="left:10px; top:30px;" class="div_locationImage"><img src="http://www.likelic.com/images/web/customers/logo_customer5.jpg" width="96"></div>
      <div class="div_companyName">上海致祥国际 </div>
      </li>      
  </ul>
  <ul class="ul_customers">
    <li>
      <div class="div_locationImage"><img src="http://www.likelic.com/images/web/customers/logo_customer1.jpg" width="86"></div>
      <div class="div_companyName">江苏亚东2111朗升 </div>
      </li>
    <li>
      <div  class="div_locationImage"><img src="http://www.likelic.com/images/web/customers/logo_customer2.jpg"></div>
      <div class="div_companyName">上海亚东国际 </div>
      </li>
    <li>
      <div style="left:40px;" class="div_locationImage"><img src="http://www.likelic.com/images/web/customers/logo_customer3.jpg"></div>
      <div class="div_companyName">天运国际货运 </div>
      </li>
         <li>
      <div style="left:40px;" class="div_locationImage"><img src="http://www.likelic.com/images/web/customers/logo_customer3.jpg"></div>
      <div class="div_companyName">天运国际货运 </div>
      </li>
  </ul>
  
    <ul class="ul_customers">
    <li>
      <div class="div_locationImage"><img src="http://www.likelic.com/images/web/customers/logo_customer1.jpg" width="86"></div>
      <div class="div_companyName">江苏亚东朗222升 </div>
      </li>
    <li>
      <div  class="div_locationImage"><img src="http://www.likelic.com/images/web/customers/logo_customer2.jpg"></div>
      <div class="div_companyName">上海亚东国际 </div>
      </li>
    <li>
      <div style="left:40px;" class="div_locationImage"><img src="http://www.likelic.com/images/web/customers/logo_customer3.jpg"></div>
      <div class="div_companyName">天运国际货运 </div>
      </li>
      
  </ul>
</div>
  
  
  <div class="div_icon_right" onclick="func_movecustomers(2)" ></div>
</div>

 

.div_proimgs img
{
    width:32.5%;
}

#loginsuccess_main .div_customers .div_wrap_ulcustomers 
{
    width:90%;
}

#loginsuccess_main .div_customers .div_icon_left 
{
    background-size:cover;
    width:5%;
    max-width:20px;
    margin:30px 0;
}
#loginsuccess_main .div_customers .div_icon_right
{
    background-size:cover;
    width:5%;
    max-width:20px;
    margin:30px 0;
}


#loginsuccess_main ul.ul_customers
{
    margin: 0;
    width: 100%;
    height:120px;
}
#loginsuccess_main ul.ul_customers li
{
    margin: 0.2em;
}

 

滚动代码

 

posted @ 2014-08-07 13:40  阳光小屋  阅读(236)  评论(0编辑  收藏  举报