关于CSS切换滤镜 制作幻灯片的原理 代码如下

html-css011

关于CSS切换滤镜 制作幻灯片的原理 代码如下,第1张

我试了下你的代码。

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>