1. 程式人生 > >一個讓圖片平滑移動的js小程式碼

一個讓圖片平滑移動的js小程式碼

/**          * @param _speed 圖片移動速度          * @param _slide 滑塊主體          * @param _slide_ul 滑塊列表          * @param _slide_total 圖片列表本體          * @param _slide_left 圖片列表左          * @param _slide_left 圖片列表右          */         var _speed=35;         var _slide = $("#slide");         var _slide_ul = $("#slide_ul");         var _slide_total = $("#slide_total");         var _slide_left = $("#slide_left");         var _slide_right = $("#slide_right");         if(_slide.width() > _slide_left.width()){             _slide_ul.html(_slide_ul.html() + _slide_ul.html());         }         _slide_right.html(_slide_left.html());         var a  = 0;         /**          * @description 滑動方法          */         function Marquee(){             /**              * @description 判斷_slide到左側距離,如果距離大於_slide_left的寬度,則移動到_slide的起始處,否則將_slide向左滑動1px。              */             if(_slide.scrollLeft() >= _slide_left.width()){                 _slide.scrollLeft(0);             }else{                 _slide.scrollLeft(_slide.scrollLeft()+1);             }         }         /**          * @description 即時呼叫方法,當頁面載入之後立刻執行          */         $(function(){             /**              * 執行迴圈任務,每過_speed毫秒執行一次Marquee(滑動)方法              * @type {number}              */             var sliding=setInterval(Marquee,_speed);             /**              * @description 當滑鼠懸停於圖片上,去除迴圈任務,移開再次啟動迴圈任務。              */             _slide.hover(function() {                 clearInterval(sliding);             },function(){                 sliding=setInterval(Marquee,_speed);             });         });