CSS滤镜filter切换图片

前几天,在这个论坛里看到了一个帖子:简单的JS网站焦点广告轮换效果实例 网址:
http://softbbs.pconline.com.cn/topic.jsp?tid=8668846 那编帖子是很不错的,给出了一个好例子.作者亦在
http://www.wcplym.com/techArticleDetail.asp?id=92 这个实际页面里给出了详细解释，不过，我认为作者并没有从根本说起，只是给出了一堆代码及注释，事实上并没有对这样广告轮换效果编程制作的原理，技术的组成部分等作出一个  分步的， 底层的， 精确的说明。这就是我写本帖子的一部分原因。我觉得一编帖子，或一篇文章，都是一个人的形像代表，要写就写好点，在做就就好点，当然我们都不是技术专家，甚至都不是专业的IT专业人事，写东西不可能太严谨。但我们可以做到尽可能的 认真。
至少使读者有一个良好的体验。好吧。闲语就此打住了。

2、前提及条件
1、本文例子及在Windows Xp sp2 中的IE6.0 中测试通过。其他条件不并不能保证例子及附件能顺利运行。
2、读懂本文，你需要，MicroSoft 对CSS样式表filter 的扩展
3、焦点图征切换的问题是什么?
要切换图片,简单地说,只需要要改变图片的src属性即可以实现,并非一定需要filter,事实上, 使用filter并非实现了图片切换，而是使图片切换的过程变得更加优雅而不唐突，所以说，你可以在不考虑使用filter的情况下，编写一个图片切换的JavaScript代码，以下是给出的一个例子。

4、没有滤镜效果的图片切换代码

HTML部分：

<!-- 简单的图片切换,请注意我自定义的两个属性,这个元素没有设置滤镜 -->
<img id="oImgSimple"  curPicNum="1" totalPicNum="5" 
src="images/a.jpg" width="263" height="335" />
<br/>
<input type="button" value="简单的变换图片" onclick="SimpleChangePic()" />

JavaScript部分：

/********************************************************
 * 功能说明:
 * 简单的图征切换,请与有滤镜的图片切换 相比较。 
********************************************************/
function SimpleChangePic()
{
// 定义要放影的图片图径的数组
var imgSrcArr = ["images/a.jpg","images/b.jpg","images/c.jpg","images/d.jpg","images/e.jpg"];

var oImg = document.getElementById("oImgSimple"); // <=== 注意ID

// 获得当前是第几张图片
var iCurIndex = parseInt(  oImg.getAttribute("curPicNum") ) ;

// 获得总图片数量,必须小于或等于图片路径数组的长度
var iTotalPicNum = parseInt(  oImg.getAttribute("totalPicNum") ) ;

iCurIndex++; // 放影下一张图片,若到了最后一张,则放影第一张
if ( iCurIndex > iTotalPicNum  )
{
iCurIndex = 1;
}
oImg.src = imgSrcArr[ iCurIndex - 1 ];

oImg.setAttribute("curPicNum",iCurIndex);

}

5、使用filter优雅地切换图片
可以想像，以上图片切换的代码是非常唐突的，因此，我们需要给这个过程一点艺术感。这时候，CSS filter就起到作用了，以下是上面代码的改进版本。

HTML部分，请注意 img 多了style属性

<img id="oImg"  curPicNum="1"  totalPicNum="5" 
src="images/a.jpg"   style="filter:RevealTrans ( duration = 2，transition=12 )" 
width="263" height="335" />
<br/>
<input type="button" value="有滤镜效果的图片变换图片" onclick="filterImages()" />

JavaScript部分

/********************************************************
 * 使用 Ms Css 中 filter:RevealTrans 切换图片  
 ********************************************************/

function filterImages()
{
// 定义要放影的图片图径的数组
var imgSrcArr = ["images/a.jpg","images/b.jpg","images/c.jpg","images/d.jpg","images/e.jpg"];

var oImg = document.getElementById("oImg");

// 获得当前是第几张图片
var iCurIndex = parseInt(  oImg.getAttribute("curPicNum") ) ;

// 获得总图片数量,必须小于或等于图片路径数组的长度
var iTotalPicNum = parseInt(  oImg.getAttribute("totalPicNum") ) ;

iCurIndex++; // 放影下一张图片,若到了最后一张,则放影第一经
if ( iCurIndex > iTotalPicNum  )
{
iCurIndex = 1;
}

/* Apply()及Play() 是两个相关的方法. 
 * 你可以这样理解:先不管这两个方法,看看这两个方法之间的语句.
 * 猜测一下页面上应用了滤镜的内容是如何变化的.
 * 具体到本例子来说,就是图片换成了另一张啦.
 * 好,这个过程就会以滤镜的效果"优雅"地显示出来
 */
 

//新增语句

oImg.filters[0].Apply();  


oImg.src = imgSrcArr[ iCurIndex - 1 ];

oImg.setAttribute("curPicNum",iCurIndex);

 

//新增语句

iTrans = Math.floor (  Math.random( ) * (12+1 ) ) ;// 动态变换的方式有12种
 

//新增语句

oImg.filters[0].transition =   iTrans  ;
 

//新增语句

  oImg.filters[0].Play(2);

}
------------------------------------------------------------------------

为动态切换图片添加setTimeout

几个前提说明
1、该帖子与我前面的帖子：http://softbbs.pconline.com.cn/topic.jsp?tid=8789098，（我的一点JavaScript经验(4):CSS滤镜filter切换图片 ）相关。如果你没有阅读，敬请你先浏览。
2、该帖子相应附件只在IE6.0浏览器上做过测试。下载附件 

3、你需要一点window.setTimeout 方法的知识才能阅读该帖子。
在前面第4编的的一点JavaScript中,我提供了一个图片切换的例子，那个例子需要单击按钮才能切换图片，
在网站的首页，都有一些焦点图片切换的例子,一个参考的例子是：
http://cn.msn.com/ 即MSN的中国首页


在这个例子中，图片间能按照一定的时间隔切换，当用户将鼠标放在小图上时,停止图片切换，直到用户将鼠标离开小图。要实现这些功能，在有前面知识的基础上，调用一些window对象的setTimeout,clearTimeout 或 etInterval
、clearInterval 函数即可。
2、时间暂停及时间间隔功能函数介绍

这4个函数的功能是什么呢？非常简单，我想我还是照搬微软的解释算了。

调用方式：

iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])

功能：

Evaluates an expression after a specified number of milliseconds has elapsed. 在超过一定的时间间隔（iMilliSeconds,这个参数以毫秒为单位，如果你输入1000，则表示一秒）之后执行表达式vCode,这个vCode可以是一段程序，亦可以是一个函数指针，即函数名称。
例如：
window.setTimeout("alert('Hello, world')", 1000);
或函数指针
function func1() {alert("Hello, world");}
window.setTimeout(func1, 1000);

注意，在第二种调用方法中，你是不能向函数传递参数的，
例如：
function func2(message) { alert( message ); }
像以下的调用方式：
window.setTimeout(func2("Hello world"), 1000);
将产生“参数无效”的错误， 因为该写法是在调用func2方法，并非向 setTimeout 传递一个函数指针 。
要避免这种错误，那么就写成第一种方式好了：window.setTimeout("func2('Hello world')", 1000);

这个 window.setTimeout 方法的返回值什么呢？ window.setTimeout 亦可解释为 “ 延迟执行 ”。
例如 window.setTimeout(func1, 5000); 表示，func1() 函数，并不在该语句执行时立即执行，
而是从该语句执行后算起，延后 5 秒执行。所以，window.setTimeout 方法的返回值本质上就是这个  “ 延迟执行 ”的进程的ID。（根《JavaScript高级程序设计》一书）。如果你在这 5 秒的等待过程中，想取消
这个进程，那个这个ID就会起作用了。通过调用 window.clearTimeout(iTimeoutID) 方法，并向该方法中传递
你在 iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage]) 中获得的ID，即可取消延迟执行。

因此，如果你想要取消 延迟执行 ，所定义的变量 iTimerID  必须是一个全局变量（global variable ）。

setInterval 介绍：
iTimerID = window.setInterval(vCode, iMilliSeconds [, sLanguage]) 该方法与 window.setTimeout 
方法最大的区别是：该方法执行多次，即按一定的时间间隔不断地执行。其他方面，都是相同的。
要取消执行，可以调用。window.clearInterval(iIntervalID) 方法。

提示：如果我们在 window.setTimeout 调用的函数中，再调用一次  window.setTimeout 方法，那不是实现了 
setInterval 的效果吗？所以这两种方法亦有相通之次的，至于用那个方法，那就视需要而定了。

3、为焦点图片切换添加setTimeout方法。

回到我们的图片切换例子中，当用户将鼠标放在放在小图上是，应该切换到对应的大图，并且应该取消时间间隔事件，当鼠标移出时,再恢复时间间隔事件，要实现这些功能，需要在前面我提供的例子（http://softbbs.pconline.com.cn/topic.jsp?tid=8789098）的基础上添加一些新的代码。

第一步：

定义 iTimerID 并且在window.onload 事件中启用时间间隔。

var iTimerId = null;

window.onload = function ()
{
iTimerId  = window.setTimeout(filterImages,4000);
}

第二步：：

 在函数  filterImages() 最后加上以下语句，使时间间隔事件能持续地执行。
function  filterImages() 
{
//.......以前的代码。

iTimerId = window.setTimeout(filterImages,4000);
}

第三步：处理小图的  onmouseover 及  onmouseout 事件。详细的内容你可以参考我上传的附件。