橫幅廣告輪換是網頁設計中很常見的一種特效。jquery是一種流行的JavaScript庫,使用jquery可以實現橫幅廣告輪換。
$(document).ready(function() { var current = 0; // 當前廣告的索引 var banner = $('.banner'); // 廣告容器 var images = banner.children('img'); // 廣告圖片 // 設置容器寬度和高度 banner.css({ 'width': images.eq(0).width() + 'px', 'height': images.eq(0).height() + 'px' }); // 隱藏除第一張圖片外的其他圖片 images.slice(1).hide(); // 使用setInterval實現自動輪換廣告 setInterval(function() { // 隱藏當前圖片 images.eq(current).fadeOut('slow'); // 顯示下一張圖片 current = (current + 1) % images.length; images.eq(current).fadeIn('slow'); }, 5000); });
在上述代碼中,通過jquery選擇器選中了廣告容器和其中的圖片,并進行了一些初始設置,如隱藏了除了第一張圖片以外的所有圖片。通過使用setInterval函數實現了自動輪換廣告,首先隱藏當前的圖片,然后顯示下一張圖片,循環執行該過程。
下一篇mysql中int最大