jQuery是一款著名的JavaScript框架,它為開發者提供了豐富的API,其中animate()輪播函數是其中一個非常實用的功能。通過自定義animate()函數內的參數,我們可以輕松制作出漂亮的輪播特效。
$(function() { var index = 0; // 當前輪播圖片下標 var imgWidth = $(".slider_image").width(); // 輪播圖片寬度 var imgCount = $(".slider_image").length; // 輪播圖片數量 // 輪播運動函數 function slide() { $(".slider_wrap").animate({ "left" : -imgWidth * index + "px" }, 500); } // 自動輪播 setInterval(function() { index++; if (index == imgCount) { index = 0; } slide(); }, 2000); // 左右箭頭控制 $(".slider_prev").click(function() { index--; if (index< 0) { index = imgCount - 1; } slide(); }); $(".slider_next").click(function() { index++; if (index == imgCount) { index = 0; } slide(); }); });
以上的代碼實現了一個簡單的輪播圖效果。首先定義了三個變量表示當前輪播圖片的下標、圖片寬度和圖片數量。接著定義了一個輪播運動函數slide(),該函數內部調用了jQuery的animate()函數,通過left屬性控制輪播圖的移動。接著使用setInterval()函數實現了自動輪播功能,每隔兩秒圖片下標加一,當下標等于圖片數量時重新從0開始循環。最后使用jQuery的click()函數綁定了左右箭頭的點擊事件,可以通過index上下加一實現切換圖片。