本文將介紹一個圖片自動輪換淡入淡出效果的實例，本實例代碼簡單，使用簡便。

實例效果如下

demodownload

實例介紹

在實例中，初始圖像將顯示在包含一些示例文本的段落的左側：

<div id="test">
  <img id="myImage" src="test1.png" alt="image test" />
  <p>本站旨在為廣大網站建設人員提供專業的網站測速和優化服務，以及為廣大網民提供網絡速度測試服務。。。</p>
</div>

首先，我們必須將圖像的文件名存儲在一個數組中。我們還必須初始化一個計數器。

var images = new Array ('test1.png', 'test2.png', 'test3.png');
var index = 1;

下一步是創建輪換圖像的函數。我們將其稱為rotateImage()。開始時，當前顯示的圖像淡出。然后，我們從圖像數組中加載下一張圖像（這里使用了我們之前引入的計數器）并淡入。在函數的末尾，我們處理計數器（要么增加它，要么重置它如果全部顯示圖像）。

function rotateImage()
{
  $('#myImage').fadeOut('fast', function() 
  {
    $(this).attr('src', images[index]);
    
    $(this).fadeIn('fast', function() 
    {
      if (index == images.length-1)
      {
        index = 0;
      }
      else
      {
        index++;
      }
    });
  });
} 

最后一步是在$(document).ready函數中使用setInterval重復調用rotateImage函數。在實例中，函數rotateImage()每 2.5 秒（2500 毫秒）執行一次。

$(document).ready(function()
{
  setInterval (rotateImage, 2500);
});

完整的 JavaScript 代碼：

var images = new Array ('test1.png', 'test2.png', 'test3.png');
var index = 1;
 
function rotateImage()
{
  $('#myImage').fadeOut('fast', function() 
  {
    $(this).attr('src', images[index]);
    
    $(this).fadeIn('fast', function() 
    {
      if (index == images.length-1)
      {
        index = 0;
      }
      else
      {
        index++;
      }
    });
  });
} 
 
$(document).ready(function()
{
  setInterval (rotateImage, 2500);
});

HTML：

<div id="test">
  <img id="myImage" src="test1.png" alt="image test" />
  <p>本站旨在為廣大網站建設人員提供專業的網站測速和優化服務，以及為廣大網民提供網絡速度測試服務。。。</p>
</div>

您可能對以下文章也感興趣

• 百葉窗過渡的幻燈片/輪播動畫【效果演示/源碼下載】
• 如何將 Bootstrap 4 Carousel 更改為淡入淡出過渡而不是滑動
• 【實例】淡入淡出幻燈片/自動輪播動畫效果
• 純CSS實現的左右滑動幻燈片
• 純CSS實現的幻燈片/輪播效果【高級動畫】
• 【實例】使用 HTML、CSS 和 JavaScript 創建幻燈片

標簽: 輪播  幻燈片