jQuery輪播淡入淡出效果是一種非常常用的展示方式。當你想要在你的網站上添加一個幻燈片展示的時候,這個效果是非常好的選擇。
代碼實現如下: //html部分 <div class="slider"> </div> //css部分 .slider { position: relative; height: 400px; width: 100%; } .slider img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; } //jquery部分 var i = 0; var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg']; //圖片路徑 var time = 4000; //切換時間 $(document).ready(function () { setInterval(function () { //定時器 $('.slider img').eq(i).fadeOut(500); //淡出 i++; if (i == images.length) i = 0; $('.slider img').eq(i).fadeIn(500); //淡入 }, time); });
上面的代碼中,首先定義了一個i變量,用來獲取當前圖片的索引。然后定義了一個images數組,來存放圖片的路徑。time變量用來定義幻燈片切換的時間。
接著在頁面加載完成后,使用setInterval定時器來實現輪播效果。在定時器中,通過eq方法獲取當前圖片的索引,并使用fadeIn和fadeOut方法讓圖片淡入淡出。
上面的代碼是基本的輪播效果,可以按照自己的需求來修改。比如可以更換輪播圖片的路徑,修改輪播效果的時間等等。