一個讓圖片平滑移動的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); }); });