轮换效果

$.fn.zhaoRotate = function(opts) {
    var o = $.extend({
        imgWidth: 0,        // 图片的可见宽度
        time    : 500       // 动画执行时间
    }, opts);
   
    return this.each(function() {
        var $this = $(this), $imgs = $this.find('li'), width = $this.width();
        var count = $this.find('li').length, left = [];
       
        $this.hover(
            function() {},
            function() {
                $imgs.each(function(index) {
                    $(this).stop().animate({
                        left: width / count * index
                    }, o.time);
                });
            }
        );
       
        $imgs.each(function(index) {
            $(this).mouseover(function() {
                for (var i = 1; i < count; i++) {
                    var d = (width - o.imgWidth) / (count - 1);
                   
                    $imgs.eq(i).stop().animate({
                        left: (i <= index ? d * i : width - d * (count - i))
                    }, o.time);
                }
            });
        });
    });
};

$(function() {
    $('.rotate').zhaoRotate({
        imgWidth: 400,
        time    : 200
    });
});


<ul class="rotate">
    <li class="img0"><a href="#"><img src="images/01.jpg" /></a></li>
    <li class="img1"><a href="#"><img src="images/02.jpg" /></a></li>
    <li class="img2"><a href="#"><img src="images/03.jpg" /></a></li>
    <li class="img3"><a href="#"><img src="images/04.jpg" /></a></li>
    <li class="img4"><a href="#"><img src="images/05.jpg" /></a></li>
</ul>


body, div, h1, h2, h3, dl, dt, dd, ul, ol, li, form, tr, th, td, center, input, textarea, img { margin:0; padding:0 }
ul, li { display:block; list-style:none; float:left }
img { border:0 }
.rotate { width:600px; height:300px; position:relative; overflow:hidden; border:1px solid green;}
.rotate li {width:400px; height:300px; position:absolute; top:0 }
.img0 { left:0 }
.img1 { left:120px }
.img2 { left:240px }
.img3 { left:360px }
.img4 { left:480px }