图片不间断滚动 jquery

  <div class="topbrandlist" id="viewer">
            <ul id="viewerFrame">
                <li><a href="/brand/index.aspx?brandid=62" target="_blank">
                    <img src="img/sy4_r29_c1.jpg" /></a></li>
                <li><a href="/brand/index.aspx?brandid=53" target="_blank">
                    <img src="img/sy4_r29_c3.jpg" /></a></li>
                <li><a href="/brand/index.aspx?brandid=9" target="_blank">
                    <img src="img/sy4_r29_c5.jpg" /></a></li>
                <li><a href="/brand/index.aspx?brandid=52" target="_blank">
                    <img src="img/sy4_r29_c8.jpg" /></a></li>
                <li><a href="/brand/index.aspx?brandid=47" target="_blank">
                    <img src="img/sy4_r29_c12.jpg" /></a></li>
                <li><a href="/brand/index.aspx?brandid=40" target="_blank">
                    <img src="img/sy4_r29_c18.jpg" /></a></li>
                <li><a href="/brand/index.aspx?brandid=54" target="_blank">
                    <img src="img/sy4_r29_c26.jpg" /></a></li>
                <li><a href="/brand/index.aspx?brandid=60" target="_blank">
                    <img src="img/sy4_r29_c36.jpg" /></a></li>
            </ul>
                  </div>
<script>
    $(function() {
           $("#viewer").imageScroller({
            next: "btn1",
            prev: "btn2",
            frame: "viewerFrame",
            width: 100,
            child: "li",
            auto: true
        });
});
</script>


//jquery.imageScroller.js

/*
 *
 * ImageScroller - a Image Horizental Scroll Viewer
 * Version 0.1
 * @requires jQuery v1.2.1
 *
 * Copyright (c) 2007 Luan
 * Email verycss-ok@yahoo.com.cn
 *
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 * Example:
 *   #viewer {height:100px; width:300px; clear:both; overflow:hidden; border:3px solid #e5e5e5;}
 *   #viewerFrame {width:505px; clear:both; padding:0;}
 *   #viewer img {width:90px; height:90px; margin:5px; display:inline; border:0;}
 *   #viewer a {display:block; float:left; width:100px; height:100px;}
 *   <script type="text/javascript">
 *   $(function(){
 *    $("#viewer").imageScroller({
 *    next:"btn1",
 *    prev:"btn2",
 *    frame:"viewerFrame",
 *    width:100,
 *    child:"a",
 *    auto:true
 *    }); 
 *   });
 *   </script>
 *   <div id="viewer"><div id="viewerFrame">
 *   <a href=""><img src="pre1.jpg"></a>
 *   <a href=""><img src="pre2.jpg"></a>
 *   <a href=""><img src="pre3.jpg"></a>
 *   <a href=""><img src="pre4.jpg"></a>
 *   <a href=""><img src="pre5.jpg"></a>
 *   </div></div>
 *   <span id="btn1">prev</span><br/><span id="btn2">next</span>  
*/

jQuery.fn.imageScroller = function(params){
 var p = params || {
  next:"buttonNext",
  prev:"buttonPrev",
  frame:"viewerFrame",
  width:100,
  child:"a",
  auto:true
 };
 var _btnNext = $("#"+ p.next);
 var _btnPrev = $("#"+ p.prev);
 var _imgFrame = $("#"+ p.frame);
 var _width = p.width;
 var _child = p.child;
 var _auto = p.auto;
 var _itv;
 
 var turnLeft = function(){
  _btnPrev.unbind("click",turnLeft);
  if(_auto) autoStop();
  _imgFrame.animate( {marginLeft:-_width}, 'fast', '', function(){
   _imgFrame.find(_child+":first").appendTo( _imgFrame );
   _imgFrame.css("marginLeft",0);
   _btnPrev.bind("click",turnLeft);
   if(_auto) autoPlay();
  });
 };
 
 var turnRight = function(){
  _btnNext.unbind("click",turnRight);
  if(_auto) autoStop();
  _imgFrame.find(_child+":last").clone().show().prependTo( _imgFrame );
  _imgFrame.css("marginLeft",-_width);
  _imgFrame.animate( {marginLeft:0}, 'fast' ,'', function(){
   _imgFrame.find(_child+":last").remove();
   _btnNext.bind("click",turnRight);
   if(_auto) autoPlay();
  });
 };
 
 _btnNext.css("cursor","hand").click( turnRight );
 _btnPrev.css("cursor","hand").click( turnLeft );
 
 var autoPlay = function(){
   _itv = window.setInterval(turnLeft, 3000);
 };
 var autoStop = function(){
  window.clearInterval(_itv);
 };
 if(_auto) autoPlay();
};