效果描述：

所有图片排队向左移动，从左边界依次消失，当最后一副图片消失后。所有图片再排队，依次从右边界出现，进入scroller范围。再排队依次消失。。周而复始。

HTML:

继续看其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);                })