查看實(shí)例
查看實(shí)例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>用JavaScript實(shí)現(xiàn)圖片翻滾特效</TITLE>
<SCRIPT>
<!--//
//定義圖片的寬度和高度，所有的圖片要有相同的尺寸；
var imgwidth=170
var imgheight=82
//下面定義了包含2個(gè)圖片的數(shù)組，數(shù)組的下標(biāo)從0開(kāi)始，你可以增加任意的圖片，按照順序增加即可，注意相應(yīng)增加數(shù)組下標(biāo)。圖片的位置及文件名可以自行修改。
var imgname=new Array()
imgname[0]="http://pic02.newdu.com/uploads/202504/02/logo22812.gif"
imgname[1]="http://pic02.newdu.com/uploads/202504/02/logo22812.gif"
//下面定義圖片的超鏈接，如果不需要url，將連接值設(shè)置為"#"；
var imgurl=new Array()
imgurl[0]="http://www.forasp.cn/"
imgurl[1]="http://www.forasp.cn/"
// 先預(yù)讀圖片，不要修改這里；
var imgpreload=new Array()
for (i=0;i<=imgname.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=imgname[i]
}
var pause=2000
//圖片的顯示速度，數(shù)值小速度快；
var speed=20
//下面的參數(shù)也會(huì)影響圖片顯示的速度，數(shù)值小速度快；代表2個(gè)圖片的顯示間隔。
var step=10
//下面的代碼無(wú)需；
var i_loop=0
var i_image=0
function stretchimage() {
if (i_loop<=imgwidth) {
if (document.all) {
imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' height='"+imgheight+"' src='"+imgname[i_image]+"' border='0'></a>"
}
i_loop=i_loop+step
var timer=setTimeout("stretchimage()",speed)
}
else {
i_loop=imgwidth
clearTimeout(timer)
imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img src='"+imgname[i_image]+"' border='0'></a>"
var timer=setTimeout("shrinkimage()",pause)
}
}
function shrinkimage() {
if (i_loop>=0) {
if (document.all) {
imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img align=right width='"+i_loop+"' height='"+imgheight+"' src='"+imgname[i_image]+"' border='0'></a>"
}
i_loop=i_loop-step
var timer=setTimeout("shrinkimage()",speed)
}
else {
i_loop=0
clearTimeout(timer)
changeimage()
}
}
function changeimage() {
i_image++
if (i_image>=imgname.length) {i_image=0}
if (document.layers) {
document.imgcontainer.document.write("<a href='"+imgurl[i_image]+"' target='_blank'><img src='"+imgname[i_image]+"' border='0'></a>")
document.imgcontainer.document.close()
}
stretchimage()
}
// -->
</SCRIPT>
<STYLE>.containerstyle {
LEFT: 100px; POSITION: absolute; TOP: 10px
}
</STYLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2900.3243" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff onload=stretchimage()>
<SPAN class=containerstyle id=imgcontainer></SPAN></BODY></HTML>