jQuery輪播淡入淡出可以為網頁增添一份美感,使頁面顯得更加動態。這種輪播效果可以以淡入淡出的方式實現,讓圖像漸漸消失或者顯示,讓頁面更加流暢美觀。
代碼: (function($) { $.fn.fadeCarousel = function(options){ var defaults = { fadeDuration: 1000, // 淡入淡出的時間設置為1秒 interval: 3000 // 每個圖像輪播時間間隔為3秒 }; var settings = $.extend(defaults, options); return this.each(function(){ var $this = $(this); var $slides = $this.find('.slides > li'); var currentIndex = 0; $slides.eq(currentIndex).fadeIn(settings.fadeDuration); setInterval(function(){ $slides.eq(currentIndex).fadeOut(settings.fadeDuration); currentIndex = (currentIndex + 1) % $slides.length; $slides.eq(currentIndex).fadeIn(settings.fadeDuration); }, settings.interval); }); }; })(jQuery);
在這個代碼里面,我們首先定義了一些默認設置,然后通過extend函數來合并用戶自定義的設置。然后我們對每一個選擇器元素進行處理,找到其中的輪播圖像,控制它們的顯示與隱藏,實現淡入淡出的效果。
這個函數利用jQuery的fadeIn和fadeOut函數來實現淡入淡出的效果,然后根據設置的時間間隔和輪播圖片的數量來控制每張圖像的顯示與隱藏。
如果您想實現這個輪播效果,只需要將這個代碼粘貼到您的網頁中,然后在需要輪播的元素上面調用fadeCarousel函數即可。相信這個效果會讓你的網頁更加的美觀動態。
上一篇css怎么做擴展