jQuery div 左右切換是一種常見的網頁滑動特效,可以讓網頁更加生動且多樣化。通過使用jQuery庫中的方法,我們可以快速的實現這一切換效果。
// 定義一個計數器變量 var count = 0; // 獲取容器元素和內容元素 var container = $('#container'); var content = $('#content'); // 獲取內容元素的總寬度 var totalWidth = content.outerWidth(true); // 獲取容器元素的可見寬度 var visibleWidth = container.outerWidth(true); // 設置容器元素的寬度和高度 container.css({ width: visibleWidth, height: content.outerHeight(true) }); // 顯示左右切換按鈕 $('#left, #right').show(); // 左切換按鈕點擊事件 $('#left').on('click', function() { count--; if (count< 0) { count = 0; return; } animateContent(); }); // 右切換按鈕點擊事件 $('#right').on('click', function() { count++; if (count >totalWidth / visibleWidth) { count = totalWidth / visibleWidth; return; } animateContent(); }); // 動畫函數 function animateContent() { content.stop().animate({ 'margin-left': -count * visibleWidth }, 500); }
以上代碼實現了一個簡單的 jQuery div 左右切換效果。我們可以通過修改容器和內容元素的樣式、修改計數器變量和算法來實現不同的效果。