請(qǐng)教JavaScript制作圖片輪換

這個(gè)效果應(yīng)該是你想要的：

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名申請(qǐng)、雅安服務(wù)器托管、營(yíng)銷軟件、網(wǎng)站建設(shè)、雨花臺(tái)網(wǎng)站維護(hù)、網(wǎng)站推廣。

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title圖片滾動(dòng)/title

/head

body

style type="text/css"

!--

#demo {

background: #FFF;

overflow:hidden;

border: 1px dashed #CCC;

width: 500px;

}

#demo img {

border: 3px solid #F2F2F2;

}

#indemo {

float: left;

width: 800%;

}

#demo1 {

float: left;

}

#demo2 {

float: left;

}

--

/style

div id="demo"

div id="indemo"

div id="demo1"

a href="#"img src="" border="0" //a

a href="#"img src="" border="0" //a

a href="#"img src="" border="0" //a

a href="#"img src="" border="0" //a

a href="#"img src="" border="0" //a

a href="#"img src="" border="0" //a

/div

div id="demo2"/div

/div

/div

script

!--

var speed=10;

var tab=document.getElementById("demo");

var tab1=document.getElementById("demo1");

var tab2=document.getElementById("demo2");

tab2.innerHTML=tab1.innerHTML;

function Marquee(){

if(tab2.offsetWidth-tab.scrollLeft=0)

tab.scrollLeft-=tab1.offsetWidth

else{

tab.scrollLeft++;

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)};

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

--

/script

/body

/html

javascript代碼的圖片輪換,求詳細(xì)分析(學(xué)習(xí)需要)

其實(shí)整個(gè)代碼的作用還是很明顯的，我想lz主要的疑惑是在

var Class = {}

Object.extend = function(destination, source) {}

這兩個(gè)函數(shù)上吧，那我就說說這兩個(gè)函數(shù)什么意思。

首先：

var Class = {

create: function() {

return function() {

this.initialize.apply(this, arguments);

}

}

}

在這個(gè)函數(shù)中有個(gè)apply()方法，他有兩個(gè)參數(shù)，第一個(gè)表示作用的對(duì)象 ，第二天表示傳入的參數(shù)。整個(gè)函數(shù)的意思是，初始化一個(gè)靜態(tài)方法“initialize”，然后通過“apply”讓類Class.create事例同時(shí)繼承initialize的方法屬性

Object.extend = function(destination, source) {

for (var property in source) {

destination[property] = source[property];

}

return destination;

}

這個(gè)函數(shù)的作用是對(duì)Object類進(jìn)行的擴(kuò)展，通過執(zhí)行這個(gè)函數(shù)，目標(biāo)對(duì)象將擁有源對(duì)象的所有屬性和方法，

實(shí)現(xiàn)自動(dòng)圖片輪換的javascript代碼

方法一：圖片輪換時(shí)利用revealTrans濾鏡產(chǎn)生轉(zhuǎn)換效果：

img src="face/face1.gif" id="turn" width="200"

style="filter:revealTrans(duration=1)"

script

var obj,first,total,cn,delay=2000

function window.onload(){

obj=document.getElementById("turn") //捕獲ID為turn的對(duì)象

first=1 //第一張圖片的路徑信息

total=18 //最后一張圖片的路徑信息

cn=1 //當(dāng)前顯示的圖片路徑信息

setTimeout("change()",delay/2)

//delay/2毫秒后執(zhí)行change()函數(shù)

}

function change(){

url="face/face" //圖片路徑的前部分

suffix=".gif" //圖片的擴(kuò)展名

if(cntotal) //如果當(dāng)前圖片數(shù)字小于最后一張的圖片數(shù)字

url+=(cn+=1)+suffix //cn自增1，并連接字符串得到url

//否則如果當(dāng)前圖片數(shù)字等于最后一張的圖片數(shù)字，即輪換到最后一張時(shí)

else if(cn==total)

//cn重調(diào)為first(第一張圖片)，并且連接字符串得到url

url+=(cn=first)+suffix

with(obj.filters.revealTrans){

apply() //捕獲對(duì)象內(nèi)容的初始顯示，為轉(zhuǎn)換做必要的準(zhǔn)備

//revealTrans濾鏡的轉(zhuǎn)換效果，0到22為23種效果，

//23為23種效果的隨機(jī)一種

transition=23

obj.src=url //設(shè)置圖片的路徑

play() //開始轉(zhuǎn)換。

}

setTimeout("change()",delay)//delay毫秒后再次執(zhí)行change()函數(shù)

}

/script

方法二：利用wipe濾鏡進(jìn)行左右擦洗式輪換

img src="face/face1.gif" id="turn" width="200"

style="filter:progid:DXImageTransform.Microsoft.Wipe(GradientSize=.5, wipeStyle=0, motion=’forward’)"

script

var obj,first,total,cn,delay=2000

function window.onload(){

obj=document.getElementById("turn")//捕獲ID為turn的對(duì)象

first=1 //第一張圖片的路徑信息

total=18 //最后一張圖片的路徑信息

cn=1 //當(dāng)前顯示的圖片路徑信息

setTimeout("change()",delay/2)//delay/2毫秒后執(zhí)行change()函數(shù)

}

function change(){

url="face/face" //圖片路徑的前部分

suffix=".gif" //圖片的擴(kuò)展名

if(cntotal) //如果當(dāng)前圖片數(shù)字小于最后一張的圖片數(shù)字

url+=(cn+=1)+suffix //cn自增1，并連接字符串得到url

//否則如果當(dāng)前圖片數(shù)字等于最后一張的圖片數(shù)字，即輪換到最后一張時(shí)

else if(cn==total)

//cn重調(diào)為first(第一張圖片)，并且連接字符串得到url

url+=(cn=first)+suffix

with(obj.filters[0]){

apply() //捕獲對(duì)象內(nèi)容的初始顯示，為轉(zhuǎn)換做必要的準(zhǔn)備

duration=delay/1000//設(shè)置轉(zhuǎn)換完成所用的時(shí)間為delay/1000秒

//用這個(gè)方法實(shí)現(xiàn)左右互換擦除的效果

motion={reverse:’forward’,forward:’reverse’}[motion]

obj.src=url //設(shè)置圖片的路徑

play() //開始轉(zhuǎn)換。

}

setTimeout("change()",delay)//delay毫秒后再次執(zhí)行change()函數(shù)

}

/script

注意：圖片名必須帶有數(shù)字規(guī)律，而且擴(kuò)展名一致。

提示：方法二的左右擦洗輪換的詳細(xì)實(shí)現(xiàn)過程主要是依靠自定義對(duì)象的簡(jiǎn)略式寫法。假設(shè)motion的當(dāng)前值為"reverse"，則

motion={reverse:’forward’,forward:’reverse’}[motion]

相當(dāng)于

motion={reverse:’forward’,forward:’reverse’}["reverse"]

即

motion="forward"

如果motion的當(dāng)前值為"forward"，則

motion={reverse:’forward’,forward:’reverse’}[motion]

相當(dāng)于

motion={reverse:’forward’,forward:’reverse’}["forward"]

即

motion="reverse"

所以motion的值就在"reverse"和"forward"之間不斷輪換

特別提示

方法一的代碼運(yùn)行后，face文件夾下的圖片face1.gif到face18.gif將從第一張到最后一張每?jī)擅胼啌Q一次，并且每次輪換的轉(zhuǎn)換效果是23種轉(zhuǎn)換效果里的隨機(jī)一種。方法二的代碼運(yùn)行后，除了轉(zhuǎn)換的效果是左右輪換式的擦洗效果，其它情況同方法一。：

圖片輪換的圖片文件名通常是有規(guī)律的序列，比如說是從1到N，然后設(shè)置定時(shí)器，每隔一段時(shí)間換一張圖片，圖片文件名作為一個(gè)自加變量，在輪換完后再從頭開始。另外在任意兩張圖片的輪換時(shí)還會(huì)有一些轉(zhuǎn)換的過渡效果，這個(gè)主要依靠轉(zhuǎn)換濾鏡來實(shí)現(xiàn)。

或者看看這里:

網(wǎng)頁題目：javascript輪換,javascript簡(jiǎn)單輪換圖
URL分享：http://chinadenli.net/article31/dsspgsd.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計(jì)、建站公司、企業(yè)建站、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)