图片翻滚导航

『更新时间：2002-9-15 』『字体：变小变大』『作者：未知 | 来源：网络』

把如下代码加入<body>区域中:
第一步:把如下代码加入<head>区域中
<script>
<!--//
//定义图片的宽度和高度，所有的图片要有相同的尺寸；
var imgwidth=400
var imgheight=60
//下面定义了包含2个图片的数组，数组的下标从0开始，你可以增加任意的图片，按照顺序增加即可，注意相应增加数组下标。
var imgname=new Array()
imgname[0]="/images/logo.gif"
imgname[1]="/images/banner.gif"
//下面定义图片的url，如果不需要url，将连接值设置为"#"；
var imgurl=new Array()
imgurl[0]="http://www.kingsnet.biz"
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()">

【点击数：】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

图片翻滚导航

相关文章

网友评论