jquery带按钮的图片切换效果

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>jquery带按钮的图片切换效果</title>
<script type="text/javascript" src="jquery-1.8.0.js"></script>
<style type="text/css">
body,ul{ padding:0; margin:0;}
li{ list-style:none;}
.bg{ width:440px; position:relative; margin:20px auto;}
.bg .prev,.bg .next{ width:50px; height:100px; background:#000; color:#FFF; text-align:center; line-height:100px; position:absolute; top:0;}
.bg .prev{ left:0; cursor:pointer;}
.bg .next{ right:0; cursor:pointer;}
.bg .imgbg{ width:320px; height:100px; margin-left:60px; overflow:hidden;}
.bg .imgbg ul{ width:9999px;}
.bg .imgbg ul li{ width:100px; height:100px; float:left; margin-right:10px; background:#f00; line-height:100px; text-align:center;}
</style>
</head>
<body>
<div class="bg">
    <span class="prev">prev</span>
    <span class="next">next</span>
    <div class="imgbg">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
<div class="cl"></div>
</div>
<script type="text/javascript">
    function DY_scroll(bg,prev,next,imgbg,speed,auto){
        var bg = $(bg);
        var prev = $(prev);
        var next = $(next);
        var longdiv = $(imgbg).find('ul');
        var width = longdiv.find('li').outerWidth(true);
        var speed = speed;
        var auto = auto;
        //next按钮
        next.click(function(e) {
            longdiv.animate({marginLeft:-width},function(){
                longdiv.find('li').eq(0).appendTo(longdiv);
                longdiv.css('margin-left',0);
            });
        });
        //prev按钮
        prev.click(function(e) {
            longdiv.find('li:last').prependTo(longdiv);
            longdiv.css('margin-left',-width);
            longdiv.animate({marginLeft:0});
        });
        //自动播放与鼠标滑动停顿
        if(auto == true){
            ad = setInterval(function(){
                next.click();    
            },speed*1000);
            bg.hover(function(e) {
                clearInterval(ad);
            },function(e){
                ad = setInterval(function(){
                    next.click();    
                },speed*1000);    
            });    
        }
    }
    DY_scroll('.bg','.prev','.next','.imgbg',1,true);
</script>
</body>
</html>
不多说效果如下：以上代码就是完整的切换效果，也是最简单的原理，希望能够学习
If the copyright belongs to the longfei, please indicate the source!!!