js部分略微修改了一下。
就是filters前面加上x1.
然后,为什么加在div而不是加在img上,原因是这个滤镜是对div做的,效果是div的
如果你要对图片做。意义不大。因为你调用了滤镜,动作完成之后还是那张图片。
x1.filters[0].apply() 引用滤镜
x1.filters[0].Enabled = 1
snh(n1)--这一步就是更换图片了。 也就是说,div在更换图片之后才会启用滤镜效果。
x1.filters[0].play()}} 播放滤镜
然后我四张图片都能显示。你不能显示的,看下图片有没有问题
首先,这种滤镜只有IE浏览器才支持,其他标准浏览器(Chrome、Safari、FireFox、Opera等)是没效果的。所以现在基本上都不使用这种滤镜了(改用CSS3动画或过渡效果),除非你能确认你的用户用的都是IE,或者是内部使用的(不公开的)Web应用。
下面是用法举例(多张图片循环显示):
<img id="tp" src="" style="width:480px height:480px filter:revealTrans(duration=2,transition=23)"><script>
window.onload=function(){
var img=document.getElementById("tp")
var pn=[],pi=0
pn[0]="图片1,自己改"
pn[1]="图片2"
pn[2]="图片3,还可以加更多图片"
img.src=pn[0]
setInterval(function(){
pi=(pi+1)%pn.length
if(navigator.userAgent.indexOf("MSIE")>0){ //如果是IE就用滤镜
img.filters.revealTrans.apply()
img.src=pn[pi] //这三行的顺序一定不能改
img.filters.revealTrans.play()
}else{ //不是IE就不使用滤镜
img.src=pn[pi]
}
},4000) //每张图片保持4秒
}
</script>