| 标题 | js图片翻滚效果 |
| 范文 | 查看实例 查看实例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>用JavaScript实现图片翻滚特效</TITLE> <SCRIPT> <!--// //定义图片的宽度和高度，所有的图片要有相同的尺寸； var imgwidth=170 var imgheight=82 //下面定义了包含2个图片的数组，数组的下标从0开始，你可以增加任意的图片，按照顺序增加即可，注意相应增加数组下标。图片的位置及文件名可以自行修改。 var imgname=new Array() imgname[0]="/uploads/202504/02/logo22812.gif" imgname[1]="/uploads/202504/02/logo22812.gif" //下面定义图片的超链接，如果不需要url，将连接值设置为"#"； var imgurl=new Array() imgurl[0]="http://www.forasp.cn/" imgurl[1]="http://www.forasp.cn/" // 先预读图片，不要修改这里； 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 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> |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。