技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

jQuery+CSS3实现图片自动轮换淡入淡出效果

作者:admin    时间:2021-9-28 13:58:14    浏览:

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

实例效果如下

 图片自动轮换淡入淡出效果

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>

您可能对以下文章也感兴趣

标签: 轮播  幻灯片  
  • IT热文
  • 站长推荐