：一款漂亮的图片切换效果（可以控制播放）

这是一款图片切换效果，主要是应用DIV CSS进行布局，以javascript作为脚本来实现这样的效果。
　　请您特别注意，本例效果在FF下无效。
　　最终效果如图：

　　我们来看HTML代码：

Example Source Code [www.52css.com]
<div id="mContainer"></div>
<input class="btn" id="pauseBtn"  type="button" value="pause" />


　　建立一个层，设置id为mContainer，作为图片的容器层。
　　设置一个按钮来控制图片切换的暂停与继续。

　　我们看下面的CSS代码：

Example Source Code [www.52css.com]
#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脚本：

Example Source Code [www.52css.com]
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=1;i<imageArray.length;i++)currentOpacity=0;
    mHTML="";
    for(i=0;i<imageArray.length;i++)mHTML+="<div id=\"photo\" name=\"photo\" class=\"mPhoto\"><img src=\"" + imageArray  +"\"></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";
    } else {
        pause = true;
        document.getElementById("pauseBtn").value = "play";
    }
}