jquery 視覺特效（水平滾動圖片）

效果描述：

所有圖片排隊向左移動，從左邊界依次消失，當最后一副圖片消失后。所有圖片再排隊，依次從右邊界出現，進入scroller范圍。再排隊依次消失。。周而復始。

HTML:

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

繼續看其CSS：

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

            #images{
                width: 950px;

            }
            #images a img{
                border: 0;
                /*圖片要實現動畫效果，必須要設置此CSS屬性*/
                position: relative;
            }

繼續看jquery：

var $wrapper = $('#scroller a img');
                var animator = function(img){
                    img.animate({left:-950},5000,function(){
                        img.css({left:450});
                        animator($(this));
                    });
                }
                
animator($wrapper);

 到此已經完成了水平滾動圖片的效果。

如果此時想添加鼠標懸停效果呢？代碼如下：

                $wrapper.hover(function(){
//                    stop()方法停止當前動畫
                    $wrapper.stop();
                },function(){
                    animator($wrapper);
                })