图片轮播特效-优快云博客

本文链接：https://blog.youkuaiyun.com/dengxingbo/article/details/4360659

本文介绍了一个简单的图片轮播特效实现方案，支持淡入淡出效果，并可在IE6及Firefox浏览器上运行。通过设置图片数组、轮播间隔等参数，利用JS实现图片的自动更换与透明度渐变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于项目的需要，今天写了一个简单的图片特效，主要功能就是多张图片的轮回切换，并且加上淡入淡出特效，经测试在IE6与Firefox下可以正常运行，效果如下：

淡入淡出

主要分三步走：

第一，在BODY中添加一个制定的<DIV>标签。

第二，添加css样式。别以为这个样式没什么用，这个是因为IE6的滤镜需要初始化部分属性，当然这个部分也可以通过JS来设定：

#flash_banner{ width: 300px; height: 300px; opacity: 1; filter : alpha(opacity=100); }

最后一步就是长长的JS代码，原理很简单，就是递归来遍历图片：

<mce:script type="text/javascript" language="javascript"></mce:script>

网页的全部代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>淡入淡出</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">/* opacity: 1; filter : alpha(opacity=100); Initial the css style, ie6 require, or the code [$("flash_banner").filters.alpha.opacity)] will not work, because the filters.alpha.opacity object is not exist. width: 300px; height: 300px; The width and the height is required in the ie6, or the filter will not work.(But I try in the ie6, everything is ok ,but in the firefox ie tab(use ie6's kernel) can not work.). For the personal reason, I set the width and height in the JS code, make it work more flexile. */ #flash_banner{ width: 300px; height: 300px; opacity: 1; filter : alpha(opacity=100); }</style> <mce:script type="text/javascript" language="javascript"></mce:script> </head> <body> <div id="flash_banner"></div> </body> </html>

下载http://download.youkuaiyun.com/source/1501453