页面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;
}
滚动代码