简单的图片幻灯效果

人气：　来源：本站原创　作者：佚名　所属栏目：图片类　[切换到繁體中文]

介绍：一个简单的图片幻灯片转换效果。

演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>站长手册_特效演示_简单的图片幻灯效果</title>
<style><!--body,td{font-size: 12px;}--></style>
<script language="JavaScript1.1">
<!--

/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/

var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (I=0;I<slideshowimages.arguments.length;I++){
slideimages[I]=new Image()
slideimages[I].src=slideshowimages.arguments[I]
}
}

function slideshowlinks(){
for (I=0;I<slideshowlinks.arguments.length;I++)
slidelinks[I]=slideshowlinks.arguments[I]
}

function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}

//-->
</script>
</head>
<body bgcolor="" >
<table width="100%" height="1000" border="0" cellpadding="10" cellspacing="5">
<tr>
<td valign="top">
<a href="javascript:gotoshow()"><img src="http://www.zzsc.org/texiao/zzsc_demo/01.jpg" name="slide" border=0 width=140 height=225></a>
<script> 
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("http://www.zzsc.org/texiao/zzsc_demo/01.jpg","http://www.zzsc.org/texiao/zzsc_demo/02.jpg","http://www.zzsc.org/texiao/zzsc_demo/03.jpg","http://www.zzsc.org/texiao/zzsc_demo/04.jpg","http://www.zzsc.org/texiao/zzsc_demo/05.jpg")
slideshowlinks("http://www.zzsc.org","http://www.zzsc.org","http://www.zzsc.org","http://www.zzsc.org")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000

var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>
</td>
</tr>
</table>
</body>
</html>

[Ctrl+A全选提示：你可先修改部分代码，再按运行]

下面教你如何应用此特效：
　--------------------------------------------------------------------------------------
　　需要在<body 这里>加入的代码：
　--------------------------------------------------------------------------------------

以下代码加到<head>…</head>中

以下代码加到<body>…</body>中

/*
JavaScript Image slideshow:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/

var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (I=0;I<slideshowimages.arguments.length;I++){
slideimages[I]=new Image()
slideimages[I].src=slideshowimages.arguments[I]
}
}

function slideshowlinks(){
for (I=0;I<slideshowlinks.arguments.length;I++)
slidelinks[I]=slideshowlinks.arguments[I]
}

function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}

//-->
</script>

<a href="javascript:gotoshow()"><img src="http://www.zzsc.org/texiao/zzsc_demo/01.jpg" name="slide" border=0 width=140 height=225></a>
<script>
<!--
//configure the paths of the images, plus corresponding target links
slideshowimages("http://www.zzsc.org/texiao/zzsc_demo/01.jpg","http://www.zzsc.org/texiao/zzsc_demo/02.jpg","http://www.zzsc.org/texiao/zzsc_demo/03.jpg","http://www.zzsc.org/texiao/zzsc_demo/04.jpg","http://www.zzsc.org/texiao/zzsc_demo/05.jpg")
slideshowlinks("http://www.zzsc.org","http://www.zzsc.org","http://www.zzsc.org","http://www.zzsc.org")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000

var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()
//-->
</script>