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>活动&gt;&gt;</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>