久久婷婷五月综合97狠狠澡,亚洲五月天台湾精品,日本黄色三级网站视频

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

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

作者:admin 時(shí)間:2021-9-28 13:58:14 瀏覽:

本文將介紹一個(gè)圖片自動(dòng)輪換淡入淡出效果的實(shí)例，本實(shí)例代碼簡(jiǎn)單，使用簡(jiǎn)便。

實(shí)例效果如下

圖片自動(dòng)輪換淡入淡出效果

demo download

實(shí)例介紹

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

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

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

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

下一步是創(chuàng)建輪換圖像的函數(shù)。我們將其稱為rotateImage()。開(kāi)始時(shí)，當(dāng)前顯示的圖像淡出。然后，我們從圖像數(shù)組中加載下一張圖像（這里使用了我們之前引入的計(jì)數(shù)器）并淡入。在函數(shù)的末尾，我們處理計(jì)數(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í)例中，函數(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è)人員提供專(zhuān)業(yè)的網(wǎng)站測(cè)速和優(yōu)化服務(wù)，以及為廣大網(wǎng)民提供網(wǎng)絡(luò)速度測(cè)試服務(wù)。。。</p>
</div>