📄 picture12.htm

📁 javascript各种效果的实例及源代码
💻 HTM
字号:
<html>
<head>
<title>图片翻滚导航</title>
<style type="text/css">
<!--
body {  font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 4px; margin-right: 0px}
A { COLOR: black; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: none }
 A:hover { COLOR: red; FONT-SIZE: 9pt; FONT-WEIGHT: 400; TEXT-DECORATION: underline }
a:active     { font: 9pt "宋体"; cursor: hand; color: #FF0033 }
--></style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script>
<!--//

//定义图片的宽度和高度，所有的图片要有相同的尺寸；
var imgwidth=400
var imgheight=60

//下面定义了包含2个图片的数组，数组的下标从0开始，你可以增加任意的图片，按照顺序增加即可，注意相应增加数组下标。
var imgname=new Array()
imgname[0]="picture1.jpg"
imgname[1]="picture2.jpg"

//下面定义图片的url，如果不需要url，将连接值设置为"#"；
var imgurl=new Array()

imgurl[0]="http://www.njcatv.net"
imgurl[1]="http://vs_server.njcatv.net/bbs"

// 先预读图片，不要修改这里；
var imgpreload=new Array()
for (i=0;i<=imgname.length-1;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=imgname[i]
}


var pause=2000

//图片的显示速度，数值小速度快；
var speed=20

//下面的参数也会影响图片显示的速度，数值小速度快；代表2个图片的显示间隔。
var step=10

//不要修改下面的代码；
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 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 {
	position:absolute;
	left:140px;
	top:125px;
}
</style>
</head>
<body bgcolor="#fef4d9" onLoad="stretchimage()">
<br>
<br>
<center><font color=red face="隶书" size=6>图片翻滚导航</font></center>
<br>
<center>
<table border=5 bordercolor=blue borderlight=green>
<tr><td align=center><font size=5 color=red face="Arial, Helvetica, sans-serif"><strong>下面为脚本显示区</strong></font></td></tr>
<tr><td align=center width=600 height=80><span id="imgcontainer" class="containerstyle"></span> 
</td></tr></table></center>
<br>
<br>
<center>
<textarea name=source rows=12 cols=55 class=yk9>
脚本说明:
第一步:把如下代码加入<head>区域中
<script>
<!--//

//定义图片的宽度和高度，所有的图片要有相同的尺寸；
var imgwidth=400
var imgheight=60

//下面定义了包含2个图片的数组，数组的下标从0开始，你可以增加任意的图片，按照顺序增加即可，注意相应增加数组下标。
var imgname=new Array()
imgname[0]="imggum1.jpg"
imgname[1]="imggum2.jpg"

//下面定义图片的url，如果不需要url，将连接值设置为"#"；
var imgurl=new Array()

imgurl[0]="http://java2000.126.com"
imgurl[1]="#"

// 先预读图片，不要修改这里；
var imgpreload=new Array()
for (i=0;i<=imgname.length-1;i++) {
	imgpreload[i]=new Image()
	imgpreload[i].src=imgname[i]
}


var pause=2000

//图片的显示速度，数值小速度快；
var speed=20

//下面的参数也会影响图片显示的速度，数值小速度快；代表2个图片的显示间隔。
var step=10

//不要修改下面的代码；
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 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 {
	position:absolute;
	left:100px;
	top:10px;
}
</style>



第二步:把如下代码加入<body>区域中
<span id="imgcontainer" class="containerstyle"></span> 


第三步:把<body>区中的内容发言为:
<body bgcolor="#fef4d9" onLoad="stretchimage()">
</textarea>
<SCRIPT LANGUAGE="JavaScript">

<!-- hide

function goHist(a) 

{

   history.go(a);

}

//-->

</script>

<FORM METHOD="post">
<INPUT TYPE="button" VALUE="返回" onClick="goHist(-1)" style="background-color: #8000FF; color: rgb(255,255,255)">
</form>
</center>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
💿 文件大小 1152 K
👤 上传用户 sujiwei
📂 所属分类 Java书籍
🏷️ 相关标签

#javascript #源代码
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -