卡卡网

本文将介绍一个图片自动轮换淡入淡出效果的实例，本实例代码简单，使用简便。

实例效果如下

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 创建幻灯片

标签: 轮播  幻灯片