jQuery+CSS3实现图片自动轮换淡入淡出效果
本文将介绍一个图片自动轮换淡入淡出效果的实例，本实例代码简单，使用简便。
实例效果如下
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 创建幻灯片
