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

運行結果：

運行結果是一個個圖片自動滾動，向左滾動，然后消失，然后從右側顯示。循環如此。