图片自动切换效果精简版

图片自动切换效果精简版

该图片切换效果js部分非常简洁，用户甚至可以根据自己需求做简单的修改就能用在手机端，在手机端只要把ul li的高度通过js来设置就行；

<script type="text/javascript">
    var $bannerUl=$('#banner ul'),$bannerLi=$('#banner ul li');
    //动态获取ul的宽度
    $bannerUl.css('width',$bannerLi.width()*$bannerLi.length);
    setInterval(function(){
        $bannerUl.animate({
            'marginLeft':-$bannerLi.width()
        },500,function(){
            $(this).animate({'marginLeft':0},0)
                    .find('li').eq(0).appendTo($(this));
            //把每次移动后的第一个li放到ul的最后面
            /*
             * 由于把第一个li放到ul的最后面，就会把第二个li挤到第一个li的位置，但是我们又需要显示第二个li，
             * 所以需要移动回原点，但是这个移动过程不能被看到，所以执行时间是0
             */
        });
    },3000);
</script>