  Ԥ  Ч  ҳ ......
ͼƬ͸ַʾĽűЧȥҲйƵģ
ĶͼƬεġ
 
<head>ǩ£ճ룺 
<SCRIPT LANGUAGE="JavaScript">
// ַʾٶ Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Ȼתʱ Duration of crossfade (seconds)
var crossFadeDuration = 3;
// ָͼļ Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'

// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad = new Image();
preLoad.src = Pic;
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
</script>
޸body
<body bgcolor="#FFFFFF" text="#000000" onLoad="runSlideShow()"> 
Ԫơid=VU
<td id=VU> 
<img>м룺<img src="1.jpg" name='SlideShow'> 

ˣǵЧˣ㲻ԣ
  Ԥ  Ч  ҳ ......


1. <head>в룺
<script language='javascript'>
isns = navigator.appName == "Netscape";
//岥ͼƬ
img1=new Image()
img2=new Image()
img3=new Image()
img4=new Image()
img5=new Image()
//ͼƬ·ļ
img1.src='images/circul-side.gif'
img2.src='images/css-manual.gif'
img3.src='images/kpt7.jpg'
img4.src='images/msn.jpg'
img5.src='images/ps-logo.jpg'
nn=1
function change_img()
{
eval('document.pic.src=img'+nn+'.src');
nn++;
if(nn>5) nn=1
if(!isns)
{
pic.filters.item(0).apply()
pic.style.visibility='visible'
pic.filters.item(0).play()
setTimeout("pic.style.visibility='hidden'",4000);
}
else
document.pic.visibility='visible'
tt=setTimeout('change_img()',4000)
}
</script>
ڴаĽܣ޸Ϣ
2. <body>мأ<body onload="change_img();">
3. һͼƬid="pic"
룺style='visibility:hidden;filter:revealtrans(duration=2.0,transition=12)'
οͼƬ룺
<img src="images/circul-side.gif" name="pic" width="120" height="90" id="pic" style='visibility:hidden;filter:revealtrans(duration=2.0,transition=12)'>

ɡ

ۿЧ

ʹCSSеrevealTrans˾ͼƬĲ
CSSrevealTrans˾οCSS RevealTrans ˾Ҳø˾ͼƬŵЧʹCSS˾revealTransͼƬЧ֪ҳЧǳôΣ׼һʹrevealTrans˾ͼƬŵЧ
ʵ˼·ʹrevealTrans˾ͼƬŵЧÿͼƬиԵӵַ

1<head>вJS룺
<SCRIPT language=JavaScript1.2>
function reapply(){
setTimeout("slideit()",800)
return true
}
window.onerror=reapply
</SCRIPT>
<SCRIPT language=JavaScript1.1>
<!--
//preload images
var image1=new Image()
image1.src="images/01.jpg"
var image2=new Image()
image2.src="images/02.jpg"
var image3=new Image()
image3.src="images/03.jpg"
var image4=new Image()
image4.src="images/04.jpg"
var image5=new Image()
image5.src="images/05.jpg"
var image6=new Image()
image6.src="images/06.jpg"
var image7=new Image()
image7.src="images/07.jpg"
var image8=new Image()
image8.src="images/08.jpg"
var image9=new Image()
image9.src="images/09.jpg"
//-->
</SCRIPT>
Уimages/bigbanner/XXX.jpgΪʾͼƬ·ɰʵ޸ġ
2<body>в룺onload=slideit()
3ҳвͼƬͼƬ<img>в룺style="FILTER: revealTrans(Duration=2, Transition=23)"Ϊname=slide
룺<img src="images/circul-side.gif" width="120" height="90" border="0" style="FILTER: revealTrans(Duration=2, Transition=23)" name=slide>
4ͼƬӳӣ<a href="javascript :slidelink()">
5룺
<SCRIPT>
<!--
////change number of images below 
var number_of_images=9
//change speed below (in seconds)
var speed=3
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
if (document.all)
slide.filters.item(0).Apply()
document.images.slide.src=eval("image"+step+".src")
if (document.all)
slide.filters.item(0).Play()
whichimage=step
if (step<number_of_images)
step++
else
step=1
if (document.all)
setTimeout("slideit()",speed*1000+3000)
else
setTimeout("slideit()",speed*1000)
}
function slidelink(){
if (whichimage==1)
top.location.href="/index.html"
if (whichimage==2)
top.location.href="/news.html" 
if (whichimage==3)
top.location.href="/game.html" 
if (whichimage==4)
top.location.href="/music.html" 
if (whichimage==5)
top.location.href="/sport.html" 
if (whichimage==6)
top.location.href="/radio.html" 
if (whichimage==7)
top.location.href="/travel.html" 
if (whichimage==8)
top.location.href="/card.jsp" 
else if (whichimage==9)
top.location.href="/study.html" 
}
</SCRIPT>
УӵַӦ<head>вJSеͼƬ
ע⣬ҳַͼƬӦѧʹþͼƬӦͷþŸӵַ


DHTMLõƬų
һõƬųҲһͼƬŵĳһЩվϿԿʽĹ沥CGIģҲҪ֧CGIASPPHPPerlȡʵַCGIõĽCSSЧټJavaScriptsĿơֻҪIE 4.0ϻNetscape 3.0ϵľͿˡֻõCSSFilter˾ЧЧֻIEг֡йCSSFilter˾ЧҿԲοҵġCSSFilter˾⡷Yesky.comѾˣ׼ɡ 
ȣΪЧҪ򼸸ߴһСͼƬš磬88x31ͼƬΪõĵͼƬ 
ΣϰһCSSFilterͼƬת˾֪ʶ 
CSSеʾת˾
ʾת˾ṩһָΪתЧת˾ֻṩһֵ뵭Чṩ˸ͼƬתЧ﷨ǣ
Filter : RevealTrans ( duration = תtransition=ת )
ҿԿһת͵Ĳṩ24תָֻͣת͵ĴţͿͼƬеתЧת±24ת˾ʽӦĴţ
̬ת˾ԡ¼ 
              ˵                                ȡֵ 
duration        ͼתӳʱ䣬СλǺ룬ҲСλ λ룬ȡֵȻ   
enabled          ָǷӦ˾Ч                  0ʾӦã0ʾá   
staus              һת״̬                  0ʾתֹͣ 
1ʾʾӦõת˾ 
2ʾת 
 ˵ 
Apply ˾Ӧõ 
Play ʼת 
Stop ֹͣת 
¼ ˵ 
OnFilterChange ˾ת䷢ı˾ʱ¼ 

CSSת˾αJavaScriptsõ֪ʶûй˵ֻоԷ¼ں棬JavascriptʱһߴJavaScriptsʹ乤ġȻЩ˾ֻIE4.0NetScape֧֣ⲢӰnetscapeеʾֻNetscapeвͼƬתЧˡ 
棬ҪʼΪĵĲˣǱдjavascriptˡǵ˼·ǣԶһͼƬţҳʱʾһͼƬԤڶͼƬһͼƬ5ӣڶͼƬҲˣǾͿʼԶлڶͼƬʱԤͼƬ5˵ͼƬԶлͼƬ˲ȥֱһִͷʼȻԶŵˡǻûֶǰĲš 
ȣҪͼƬԤ룬Ϊл̵ԺͲŹ̵ԡҪԤһͼƬܼ򵥣ֻҪڴ½һͼƬʵѸñָһͼƬǵԶͼƬģͼƬԤ롣javascriptдӣ 
var myImage = new Image() 
myImage.src = "someImage.gif" 
ȻǻҪ֪ͼƬǷˣǾʾû룬ôҪˡǻҪһĴ룬м䣬ԣJavaScriptͱˣ 
var img = new Image() 
img.onload = doReadyImage 
img.onerror = doErrorDisplay 
img.src = "someImage.gif" 
ǼͼƬonloadonerror¼ֱǷԤغԤس¼img.srcǰ档ĻͼƬԤؾͻ 
ǵͼƬлˣǰ棬ǸϰCSSFilterת˾ĸЧôΪ23Ч棬ΪIEЧдJavaScript 
if (document.images.slideShow.filters) 
{ 
document.images.slideShow.filters[0].Stop() 
document.images.slideShow.filters[0].Apply() 
// ʹתЧ 
document.images.slideShow.filters.revealTrans.transition=23 
} 
document.images.slideShow.src = sSource 
// ʼתЧִ 
if (document.images.slideShow.filters) 
document.images.slideShow.filters[0].Play() 
κ˶ܽڵƬԼվϣֻ繹߻ὫƳһõƬ㡣һּ򵥵һƬһHTMLҳĻõƬһж̬еĻõƬ㣬ÿһӰصͬһHTMLҳȥǻʹDynamic HTML (DHTML)Cascading Style Sheets(CSS)ȥר˵ĻõƬ㣬ѡ˺ͬ¾øģาӡ̡ǼסΪֻõƬDHTMLдģֻ4.0ϸµ汾ܿõ   
ȻඣֻõƬҲ;ֻڻû뵽ѡ 
һ 
ռѾ׼ϵӰ񣬶ҽǲóͬĳߴ硣ȷߴ緶Χ640 x 480أеƬسߴ綼ҪͬƬߴСԹڶԻӾϵĲг 
 
ҳױǩҪģ<STYLE>ǩָʹõCSS<STYLE>ǩҪõƬֵҳ趨λãһͷǷҪԿհױͼֱ֣һŻõƬ뽫гҳУʹԼѡλ꣺ 
<STYLE type="text/css"> <!-- .slides {position:absolute; left: 25%; top:25%; visibility:hidden} --> </STYLE> 
 
̴CSSϸڲ֣ҳױǩвJavaScriptvar numSLides =֮趨ҪĻõƬĿ̫࣬ΪÿһƬΪҳӿɹ۵KBǵķƬǳ룺 
<SCRIPT language="JavaScript1.2"> var numSlides = 5; var currentSlide = numSlides; 
 
ͼƬĽ˵֣еĳ룬ǵ˵ֻԼ˵֣ 
var captionTxt = new Array(numSlides); 
function setUpCaptions() { 
captionTxt[1] = "39ͷڡ" 
captionTxt[2] = "ʨͷ" 
captionTxt[3] = "Сͷ*" 
captionTxt[4] = "ˮ羨ڻ" 
captionTxt[5] = "Сʯ" 
} 
 
ʾĳҳеHTMLļλþJavaScript˵¡ΪNavigator 4.0IE 4.0ԲͬķʽCSSǵscriptʹö⣨object detectionֵģʽֵģʽNavigatorǿԶĳЩضĶʹIE뻹áҲĽβһҪ</SCRIPT>ǩ 
function setUp() { 
if (!document.all) { 
document.all = document; 
for (i=1;i<=numSlides;i++) document.all[("image"+i)]. 
style=document.all[("image"+i)]; 
} 
switchSlide(1); 
} 
function switchSlide(sDir) { 
newSlide = currentSlide + sDir; 
if (!newSlide) newSlide=numSlides; 
if (newSlide > numSlides) newSlide=1; 
document.all[("image"+newSlide)].style.visibility="visible"; 
document.all[("image"+currentSlide)]. 
style.visibility="hidden"; 
// Ҫ˵֣Ƴһ: 
document.all["captions"].document.forCaptions.captionsText. 
value=captionTxt[newSlide]; 
currentSlide = newSlide; 
} 
//--> 
</script> 
  
עЩ*βע⣺û˵֣ôͽһеƳ 
 
</HEAD>رҳױǩȻеĳ룬ҳHTMLļеbody֡ ע⣬Ը<DIV>ǩÿӰǺ<IMG src>ʽй 
<BODY onLoad="setUp()"> 
<B> Builder.com slide show!</B> 
<DIV id="image5" class="slides"><IMG src="fifth.jpg"></DIV> 
<DIV id="image4" class="slides"><IMG src="fourth.jpg"></DIV> 
<DIV id="image3" class="slides"><IMG src="third.jpg"></DIV> 
<DIV id="image2" class="slides"><IMG src="second.jpg"></DIV> 
<DIV id="image1" class="slides"><IMG src="first.jpg"></DIV> 
 
ڱԼĲ㰴õƬṩǵ㰴ĶʹüʽĳӣPreviousNextGIFѡť;ɶˡʹһtablenext.gifpreviuos.gif 
<DIV style="position:absolute; top:350px; left:100px"> 
<A href="javascript :switchSlide(-1)"><IMG src="previous.gif" border=0></A> 
<A href="javascript :switchSlide(1)"><IMG src="next.gif" border=0></A> 
</DIV> 
㲻GIFļPreviousNextѡťȡ<IMG>ǩ 
 
<TEXTAREA>ֵ˵֡<TEXTAREA>ĳߴСֻҪırows=cols=ּɡǳ룺 
<DIV id="captions" style="position:absolute; left: 320px; top:75px"> 
<B>Picture caption</B> 
<FORM name=forCaptions> 
<TEXTAREA name="captionsText" wrap="virtual" rows=25 cols=20"></TEXTAREA> 
</FORM> 
</DIV>