banner轮播图js
例子1：
if(!$(\'.side_ul ul\').is(":animated")){
var wli = $(\'.side_ul li\').width()+25;
var lli = $(\'.side_ul li\').length;
var tw = lli*wli;
var witem = wli*3;
var marl = parseInt($(\'.side_ul ul\').css(\'margin-left\'));
var endmar = (parseInt(tw/witem)-1)*witem;
if(marl <= -endmar){
$(\'.side_ul ul\').animate({marginLeft:\'0px\'},300)
}else{
$(\'.side_ul ul\').animate({marginLeft:marl-witem+\'px\'},300)
}
}
例子2：带有底部小色条同时滚动
<div class="baoliao tongcheng">
<p class="headline1">同城<font>活动>></font></p>
<ul class="tongchengul">
<li>
<div class="libox">
<div class="imgboxoo">
<a href="#">
<img src="img/143686314955a4caad6a0ab.jpg">
</a>
</div>
<div class="textboxoo">
<h4><a href="#">1顺势而为！共享史上最大财富盛宴</a></h4>
<p>2015-12-23 15:52<a href="#">参与活动</a></p>
<p class="zhuzhi">山东济南市高新区舜泰广场<span><font>18</font> 报名</span></p>
</div>
</div>
</li>
<li>
<div class="libox">
<div class="imgboxoo">
<a href="#">
<img src="img/143686314955a4caad6a0ab.jpg">
</a>
</div>
<div class="textboxoo">
<h4><a href="#">2顺势而为！共享史上最大财富盛宴</a></h4>
<p>2015-12-23 15:52<a href="#">参与活动</a></p>
<p class="zhuzhi">山东济南市高新区舜泰广场<span><font>18</font> 报名</span></p>
</div>
</div>
</li>
<li> <div class="libox"> <div class="imgboxoo"> <a href="#"> <img src="img/143686314955a4caad6a0ab.jpg"> </a> </div> <div class="textboxoo"> <h4><a href="#">3顺势而为！共享史上最大财富盛宴</a></h4> <p>2015-12-23 15:52<a href="#">参与活动</a></p> <p class="zhuzhi">山东济南市高新区舜泰广场<span><font>18</font> 报名</span></p> </div> </div> </li> <li> <div class="libox"> <div class="imgboxoo"> <a href="#"> <img src="img/143686314955a4caad6a0ab.jpg"> </a> </div> <div class="textboxoo"> <h4><a href="#">4顺势而为！共享史上最大财富盛宴</a></h4> <p>2015-12-23 15:52<a href="#">参与活动</a></p> <p class="zhuzhi">山东济南市高新区舜泰广场<span><font>18</font> 报名</span></p> </div> </div> </li> <li> <div class="libox"> <div class="imgboxoo"> <a href="#"> <img src="img/143686314955a4caad6a0ab.jpg"> </a> </div> <div class="textboxoo"> <h4><a href="#">5顺势而为！共享史上最大财富盛宴</a></h4> <p>2015-12-23 15:52<a href="#">参与活动</a></p> <p class="zhuzhi">山东济南市高新区舜泰广场<span><font>18</font> 报名</span></p> </div> </div> </li> <div class="clear"></div> </ul> <div class="gudongtiao"> <ul class="icongun"> <li class="gudongli"></li> <li></li> <li></li> <li></li> <li></li> <div class="clear"></div> </ul> </div></div> <script> $(function(){ var width = $(\'.tongcheng .headline1\').width(); var ulwidth = width*5; $(\'.tongcheng\').width(width); $(\'.tongchengul li\').width(width); $(\'.tongchengul\').width(ulwidth); var t = setInterval(\'lunbo()\',2000); }); function lunbo(){ if(!$(\'.tongchengul\').is(":animated")){ var width = $(\'.tongcheng .headline1\').width(); var length = $(\'.tongchengul li\').length; var ulwidth = width*length; var marginleft = parseInt($(\'.tongchengul\').css(\'margin-left\')); var maxmarginleft = (parseInt(ulwidth/width)-1)*width; if(marginleft<= -maxmarginleft){ $(\'.tongchengul\').css(\'margin-left\',-width); $(\'.tongchengul\').animate({marginLeft:\'0px\'},300,function(){ $(\'.icongun li\').siblings().removeClass(\'gudongli\'); $(\'.icongun li:eq(0)\').addClass(\'gudongli\'); }); }else{ $(\'.tongchengul\').animate({marginLeft:marginleft-width+\'px\'},300,function(){ var num = Math.abs(marginleft/width-1); $(\'.icongun li\').siblings().removeClass(\'gudongli\'); $(\'.icongun li:eq(\'+num+\')\').addClass(\'gudongli\'); }); } } } </script>