jquery 視覺特效（幻燈片左右移動）

描述：

點擊指示左右方向的圖片，圖片可以左右移動，並且左移動一個圖片，此圖片（第一個圖片）自動排到圖片隊列最后面（成為最后一張圖片）。右移動一個圖片，此圖片（最后一個圖片）自動排到圖片隊列最前面（成為第一張圖片）

上述描述遇到了問題，也許是我用jquery的appendTo和prependTo方法，圖片HTML代碼重新排列，第二張圖片會自動遷移占了原本第一張圖片的位置，也就是說，我每次點擊向左移動時，所有圖片其實向前移動了兩次（除了第一張）。唉。。。糾結~~~~到底什么原因啊，怎么解決啊。

先不管了，以后再說吧。

HTML：

 

      <div id="scroller">
            <div id="images">
                <a href="pic1.jpg"><img src="pic1.jpg" alt="" width="150" height="150" /></a>
                <a href="pic2.jpg"><img src="pic2.jpg" alt="" width="150" height="150"/></a>
                <a href="pic3.jpg"><img src="pic3.jpg" alt="" width="150" height="150" /></a>
                <a href="pic4.jpg"><img src="pic4.jpg" alt="" width="150" height="150" /></a>
                <a href="pic5.jpg"><img src="pic5.jpg" alt="" width="150" height="150"/></a>
                <a href="pic6.jpg"><img src="pic6.jpg" alt="" width="150" height="150" /></a>
            </div>
        </div>
        <div id="direction">   
            <a href="#"><img src="left.jpg" alt=""/></a> 
            <a href="#"><img src="right.jpg" alt=""/></a>
        </div>

 

 

 

CSS（#scroller注釋overflow:hidden是為了看效果）：

        img{
                border: 0;
                /*如果不float: left，FF和IE下都有默認的距離，而且大小不一。*/
                float: left;
                margin-left: 5px;
            }

            /*只能容納顯示一張圖片*/
            #scroller{
                margin: auto;
                height: 150px;
                width: 470px;
                /*設置 position為relative，讓圖片移動以scroller的左上角為基點*/
                position: relative;
                /*超出范圍的隱藏*/
                /*overflow: hidden;*/
                /*設置邊框樣式*/
                border: 1px saddlebrown dashed;
            }

            #images{
                width: 930px;
                height: 150px;
                border: 1px solid aqua;
            }
            #images a img{
                width: 150px;
                height: 150px;

                /*圖片要實現動畫效果，必須要設置此CSS屬性*/
                position: relative;

            }

            #direction{
                width: 260px;
                height: 120px;
                margin: auto;
            }

Jquery：

//                圖片對象
                var $img_obj = $('#images a img');
//                左右指示的圖片對象
                var $direction = $('#direction a img');
//                左指示圖片
                var $leftdir = $direction.eq(0);
//                右指示圖片
                var $rightdir = $direction.eq(1);
                
                var $leftanimator = function(imgobj){   
                    imgobj.animate({
                        'left':'+=-155'
                    },300);
//                    點擊時,此時的a對象集合
                    var $now_a_obj = $('#images a');
//                    把此時圖片隊列里隊首圖片放到隊尾
                    $now_a_obj.eq(0).appendTo($('#images')); 
                }
                
                var $rightanimator = function(imgobj){
                    imgobj.animate({
                        'left':'+=155'
                    },300);
                    //                    移動的是a以及其包含的img
                    var $now_a_obj = $('#images a');
                    //                    點擊時,此時的a對象集合
                    var $now_img_obj = $('#images a img');
                    var length = $now_img_obj.length;
//                     把此時圖片隊列里隊尾圖片放到隊首
                    $now_a_obj.eq(length-1).prependTo($('#images'));                  
                }         
//                讓指示圖片半透明
                $direction.fadeTo(100, 0.5);
               
                $direction.hover(function(){
                    $(this).stop(true,true).animate({
                        'opacity':1
                    }, 300);
                }, function(){
                    $(this).stop(true,true).animate({
                        'opacity':0.5
                    }, 300);
                });
                
                $leftdir.click(function(){
                    $leftanimator($img_obj);
                    //                    alert($now_img_obj.eq(0).attr('href'));
                })
                
                $rightdir.click(function(){
                    $rightanimator($img_obj);
                    //                    alert($now_img_obj.eq(length-1).attr('href'));
                });
  
            });

截圖：

初始：

點擊左指示一次：

 

 

點擊左指示二次：

 

點擊右指示一次：

 

 

點擊右指示二次：