麻豆成人91久久精品二区三区,免费看片亚洲天堂综合

技術(shù)頻道 - html技術(shù)

jQuery+CSS3實現(xiàn)圖片自動輪換淡入淡出效果

作者:admin 時間:2021-9-28 13:58:14 瀏覽:

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

實例效果如下

圖片自動輪換淡入淡出效果

demo download

實例介紹

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

<div id="test">
  <img id="myImage" src="test1.png" alt="image test" />
  <p>本站旨在為廣大網(wǎng)站建設(shè)人員提供專業(yè)的網(wǎng)站測速和優(yōu)化服務(wù)，以及為廣大網(wǎng)民提供網(wǎng)絡(luò)速度測試服務(wù)。。。</p>
</div>

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

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

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

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函數(shù)中使用setInterval重復(fù)調(diào)用rotateImage函數(shù)。在實例中，函數(shù)rotateImage()每 2.5 秒（2500 毫秒）執(zhí)行一次。

$(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>本站旨在為廣大網(wǎng)站建設(shè)人員提供專業(yè)的網(wǎng)站測速和優(yōu)化服務(wù)，以及為廣大網(wǎng)民提供網(wǎng)絡(luò)速度測試服務(wù)。。。</p>
</div>