小型轮播图

html结构

<div class="picScroll-lefts">
    <div class="hd">
        <a class="next"> &gt;</a>
        <a class="prev"> &lt; </a>
    </div>
    <div class="bd">
        <div class="tempWrap">
            <ul class="picList" style="margin-left: -1164px;"><li style="margin: 0px 3px;"></li></ul>
        </div>
    </div>
</div>

//调用函数    scrolls($('.picList'),$('.picList li'));

<script>
    function scrolls(scrollContent,everyContent) {
        var margin_left=Number(everyContent.css('margin-left').split('p')[0]);
        var margin_right=Number(everyContent.css('margin-right').split('p')[0]);
        var padding_left=Number(everyContent.css('padding-left').split('p')[0]);
        var padding_right=Number(everyContent.css('padding-right').split('p')[0]);
        //得到margin值的数字
        var li_margin=margin_left+margin_right+padding_left+padding_right;
        var width_one=everyContent.width()+li_margin;
        var number_list=everyContent.length;
        var index_now=Number(number_list-1);
        var index=everyContent.index();
        scrollContent.css('margin-left','-'+width_one*6+'px');
        $('.hd .next').click(function () {
            var plc_list_one=scrollContent.find('li').eq(0);
            plc_list_one.animate({'marginLeft':'-'+width_one+'px'},2000,function(){
                $(this).remove().appendTo( $('.picList'));
            });
            scrollContent.find("li").eq(index_now).css('margin','0 '+margin_left+'px');
        })
        $('.hd .prev').click(function () {
            var pic_list_last=scrollContent.find('li').eq(0);
            if(!scrollContent.find('li').is(":animated")){
                pic_list_last.animate({'marginRight':'+='+width_one+'px'},2000,function(){
                    //pic_list_last.remove();
                    scrollContent.find('li').eq(index).prependTo($('.picList'));
                    $(this).css('margin','0 '+margin_left+'px');
                });
            }
        })
    }
    //自动轮播
    var timer=setInterval(function(){
        $('.hd .next').triggerHandler('click');
    },2000);
//关闭定时器，主要要关闭所有的定时器
    $('.picScroll-lefts').mouseover(function(){
        clearInterval(timer);
        clearInterval(timers);
    }).mouseleave(function(){
        timers=setInterval(function(){
            $('.hd .next').triggerHandler('click');
        },2000);
    })
</script>