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'));
                });
  
            });

截图：

初始：

点击左指示一次：

 

 

点击左指示二次：

 

点击右指示一次：

 

 

点击右指示二次：