177、图片翻滚导航

177、图片翻滚导航

脚本说明:

第一步:把如下代码加入<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()">

Write a comment

Comments: 0