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