jQuery左右滾動效果很常見,可以使用jQuery的animate()方法來實現。我們可以使用一個容器來包裹所有的滾動項,然后使用jQuery獲取該容器的寬度,計算出每個滾動項的位置,然后使用animate()方法向左或向右滾動。
// 獲取容器的寬度 var containerWidth = $('.scroll-container').width(); // 獲取每個滾動項的寬度 var itemWidth = $('.scroll-item').outerWidth(true); // 獲取所有滾動項的數量 var itemCount = $('.scroll-item').length; // 計算出每個滾動項的位置 for (var i = 0; i< itemCount; i++) { $('.scroll-item').eq(i).css('left', i * itemWidth); } // 循環滾動函數 function scroll() { // 獲取當前的位置 var currentLeft = $('.scroll-container').scrollLeft(); // 判斷是否已經滾動到右邊盡頭 if (currentLeft + containerWidth >= itemWidth * itemCount) { // 向左滾動 $('.scroll-container').animate({ scrollLeft: 0 }, 1000, 'linear', scroll); } else { // 向右滾動 $('.scroll-container').animate({ scrollLeft: currentLeft + itemWidth }, 1000, 'linear', scroll); } } // 開始滾動 scroll();
上面的代碼中,我們首先獲取了容器的寬度和每個滾動項的寬度,然后使用循環計算出每個滾動項的位置,設置其left屬性。接著,我們定義了一個scroll()函數來實現滾動效果,使用jQuery的animate()方法向左或向右滾動,并在滾動完成后再次調用scroll()函數實現無限循環滾動。
通過以上代碼,我們就可以實現一個簡單的jQuery左右滾動效果。
上一篇jquery 小數轉大寫
下一篇jquery 封裝對象