JQuery輪播就是在網頁中實現圖片、文字等內容的自動滾動或手動左右滑動的效果,非常適用于網站的幻燈片、廣告、推薦等區域。在JQuery輪播插件的實現過程中,左右箭頭是不可或缺的,它們可以讓用戶自由控制輪播方向,增強用戶體驗。下面就是一段關于JQuery輪播左右箭頭代碼的示范:
$(document).ready(function(){ var speed = 800; // 設置圖片滾動的速度 var count = $('#container .pic li').length; // 獲取圖片的數量 var width = $('#container .pic li').width(); // 獲取單個圖片的寬度 var timer; // 設置自動播放的計時器 var curIndex = 0; // 當前圖片的索引 // 鼠標移動到輪播區域時,停止自動播放 $('#container').hover(function(){ clearInterval(timer); }, function(){ timer = setInterval(function(){ curIndex++; if(curIndex == count) curIndex = 0; move(curIndex); }, 3000); }); //給左右箭頭綁定點擊事件,實現手動控制輪播 $('#container .btn_left').click(function(){ curIndex--; if(curIndex < 0) curIndex = count - 1; move(curIndex); }); $('#container .btn_right').click(function(){ curIndex++; if(curIndex == count) curIndex = 0; move(curIndex); }); // 移動圖片的動作 function move(index){ $('#container .pic').stop().animate({ left: -index * width }, speed); // 圖片下面的圓點跟隨變化 $('#container .btn li').removeClass('on').eq(index).addClass('on'); } // 啟動自動播放 timer = setInterval(function(){ curIndex++; if(curIndex == count) curIndex = 0; move(curIndex); }, 3000); });
以上代碼主要實現了輪播圖的自動播放、左右箭頭的手動控制和圓點隨之變化的效果。通過緩沖動畫插件animate(),可以實現更加平滑的滾動效果。
下一篇css怎么使文字折疊