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

html-css017

关于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()}} 播放滤镜

然后我四张图片都能显示。你不能显示的,看下图片有没有问题

CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的方式实现各种定位。

CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。

DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。

<div id="mContainer"></div>

<input class="btn" id="pauseBtn" onclick="doPause()" type="button" value="pause" />

建立一个层,设置id为mContainer,作为图片的容器层。

设置一个按钮来控制图片切换的暂停与继续。

我们看下面的CSS代码:

#mContainer {

width:225px

position:relative

height:168px

}

.mPhoto {

filter:Alpha(opacity=0)

left:0px

position:absolute

top:0px

moz-opacity:0.0

}

.btn {

border-right:#000 1px solid

border-top:#000 1px solid

margin-top:5px

font-size:9px

border-left:#000 1px solid

width:40px

border-bottom:#000 1px solid

font-family:verdana

}

这些代码我们都能看明白,需要指出的是类mPhoto的样式定义。

主要是应用了滤镜将图片的透明度设置为零,完全透明。

我们看下面的javascript脚本:

var currentPhoto = 0

var secondPhoto = 1

var currentOpacity = new Array()

var imageArray = new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg")

var FADE_STEP = 2

var FADE_INTERVAL = 10

var pause = false

function init() {

currentOpacity[0]=99

for(i=1i<imageArray.lengthi++)currentOpacity[i]=0

mHTML=""

for(i=0i<imageArray.lengthi++)mHTML+="<div id=\"photo\" name=\"photo\" class=\"mPhoto\"><img src=\"" + imageArray[i] +"\"></div>"

document.getElementById("mContainer").innerHTML = mHTML

if(document.all) {

document.getElementsByName("photo")[currentPhoto].style.filter="alpha(opacity=100)"

} else {

document.getElementsByName("photo")[currentPhoto].style.MozOpacity = .99

}

mInterval = setInterval("crossFade()",FADE_INTERVAL)

}

function crossFade() {

if(pause)return

currentOpacity[currentPhoto]-=FADE_STEP

currentOpacity[secondPhoto] += FADE_STEP

if(document.all) {

document.getElementsByName("photo")[currentPhoto].style.filter = "alpha(opacity=" + currentOpacity[currentPhoto] + ")"

document.getElementsByName("photo")[secondPhoto].style.filter = "alpha(opacity=" + currentOpacity[secondPhoto] + ")"

} else {

document.getElementsByName("photo")[currentPhoto].style.MozOpacity = currentOpacity[currentPhoto]/100

document.getElementsByName("photo")[secondPhoto].style.MozOpacity =currentOpacity[secondPhoto]/100

}

if(currentOpacity[secondPhoto]/100>=.98) {

currentPhoto = secondPhoto

secondPhoto++

if(secondPhoto == imageArray.length)secondPhoto=0

pause = true

xInterval = setTimeout("pause=false",2000)

}

}

function doPause() {

if(pause) {

pause = false

document.getElementById("pauseBtn").value = "pause"