jquery 视觉特效（图片自动移动，左侧消失，右侧进入）

HTML：

 <div id="scroller1">
            <img src="pic1.jpg" alt="" width="150" height="150" class="oneImage"/>
</div>

CSS：

img{
                border: 0;
                /*图片要实现动画效果，必须要设置此CSS属性*/
                position: relative;
}
            /*只能容纳显示一张图片*/
#scroller1{                  
                margin: auto;
                /*                width: 470px;*/
                width: 150px;
                height: 150px;
                padding: 10px;
                border: 1px solid deeppink;
                overflow: hidden;
                /*设置此css属性，是为了让图片基于scroll1产生进行动画效果*/
                position: relative;
}

jquery：

 

                //定时器变量
           var timeout;
                function scroll(){
                    $('.oneImage').animate({'left':-160},'slow',function(){
                        $(this).css('left', 150);
                        $('.image').animate({'left':0}, 'slow');
                    })
                    //清除定时器的值
                    clearTimeout(timeout);
                    //设置定时器的值
                    timeout = setTimeout(scroll,300);
                      
                }
            
                //执行滚动函数
                scroll();

运行结果：

运行结果是一个个图片自动滚动，向左滚动，然后消失，然后从右侧显示。循环如此。