DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> DIVCSS布局實例:一款漂亮的圖片切換效果
DIVCSS布局實例:一款漂亮的圖片切換效果
編輯:CSS詳解     
我們來看Html代碼:

示例代碼 [www.mb5u.com] <div id="mContainer"></div>
<input class="btn" id="pauseBtn" onclick="doPause();" type="button" value="pause" />
  建立一個層,設置id為mContainer,作為圖片的容器層。
  設置一個按鈕來控制圖片切換的暫停與繼續。

  我們看下面的CSS代碼:

示例代碼 [www.mb5u.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腳本:

示例代碼 [www.mb5u.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[i]=0;
mHtml="";
for(i=0;i<imageArray.length;i )mHtml ="<div id=\"photo\" name=\"photo\" class=\"mPhoto\"><img src=\"" _fcksavedurl="\""" 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";
} else {
pause = true;
document.getElementById("pauseBtn").value = "play";
}
}
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved