2012-11-08 来源:网络
【实例名称】
JS实现循环滚动显示图片
【实例描述】
随着Blog的日渐鼎盛,个人信息的网络存储越来越受人们青睐。目前最流行的个人相册,是个人风采的又一展示方式。在相册中通常可以通过滚动的形式浏览照片。本例介绍如何在网站中实现图片的滚动。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页-学无忧(www.xue51.com)</title> <script language="javascript"> //定义要显示的图片数组 imgArr=new Array() imgArr[0]="<a href=http://www.google.com/ onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'> <img src=LOGO1.gif border=0></a>" imgArr[1]="<a href=http://www.baidu.com/ onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'> <img src=LOGO2.gif border=0></a>" imgArr[2]="<a href=http://www.google.com/ onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'> <img src=LOGO1.gif border=0></a>" imgArr[3]="<a href=http://www.baidu.com/ onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'> <img src=LOGO2.gif border=0></a>" imgArr[4]="<a href=http://www.google.com/ onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'> <img src=LOGO1.gif border=0></a>" //内部变量 var moveStep=4; //步长,单位:pixel var moveRelax=100; //移动时间间隔,单位:ms ns4=(document.layers)?true:false; var displayImgAmount=4 ; //视区窗口可显示个数 var divWidth=220; //每块图片占位宽 var divHeight=145; //每块图片占位高 var startDnum=0; var nextDnum=startDnum+displayImgAmount; var timeID; var outHover=false; var startDivClipLeft; var nextDivClipRight; //初始化层 function initDivPlace() { if (ns4) { for (i=0;i<displayImgAmount;i++){ eval("document.divOuter.document.divAds"+i+".left="+divWidth*i) } for (i=displayImgAmount;i<imgArr.length;i++){ eval("document.divOuter.document.divAds"+i+ ".left="+divWidth*displayImgAmount) } }else{ for (i=0;i<displayImgAmount;i++){ eval("document.all.divAds"+i+ ".style.left="+divWidth*i) } for (i=displayImgAmount;i<imgArr.length;i++){ eval("document.all.divAds"+i+ ".style.left="+divWidth*displayImgAmount) } } } //设置定时器移动图片 function mvStart(){ timeID=setTimeout(moveLeftDiv,moveRelax) } //清除定时器,停止移动 function mvStop(){ clearTimeout(timeID) }
function moveLeftDiv(){ if (ns4){ for (i=0;i<=displayImgAmount;i++){ eval("document.divOuter.document. divAds"+parseInt((startDnum+i)%imgArr.length)+".left= document.divOuter.document.divAds"+ parseInt((startDnum+i)%imgArr.length)+".left-moveStep") }
startDivClipLeft=parseInt(eval("document. divOuter.document.divAds"+startDnum+".clip.left")) nextDivClipRight=parseInt(eval("document.divOuter. document.divAds"+nextDnum+".clip.right"))
if (startDivClipLeft+moveStep>divWidth){ eval("document.divOuter.document.divAds"+ nextDnum+".clip.right="+divWidth) eval("document.divOuter.document.divAds"+ startDnum+".left="+divWidth*displayImgAmount) eval("document.divOuter.document.divAds"+ parseInt((nextDnum+1)%imgArr.length)+".left= document.divOuter.document.divAds"+nextDnum+".left+"+divWidth) eval("document.divOuter.document.divAds"+ parseInt((nextDnum+1)%imgArr.length)+".clip.left=0") startDnum=(++startDnum)%imgArr.length nextDnum=(startDnum+displayImgAmount)%imgArr.length startDivClipLeft=moveStep-(divWidth-startDivClipLeft) nextDivClipRight=moveStep-(divWidth-nextDivClipRight) }else{ eval("document.divOuter.document.divAds"+nextDnum+".clip.left=0") startDivClipLeft+=moveStep nextDivClipRight+=moveStep } eval("document.divOuter.document.divAds"+ startDnum+".clip.left="+startDivClipLeft) eval("document.divOuter.document.divAds"+ nextDnum+".clip.right="+nextDivClipRight) }else{ for (i=0;i<=displayImgAmount;i++){ eval("document.all.divAds"+ parseInt((startDnum+i)%imgArr.length)+".style.left= document.all.divAds"+parseInt((startDnum+i)%imgArr.length)+ ".style.pixelLeft-moveStep") } startDivClipLeft=parseInt(eval("document.all.divAds"+ startDnum+".currentStyle.clipLeft")) nextDivClipRight=parseInt(eval("document.all.divAds"+ nextDnum+".currentStyle.clipRight")) if (startDivClipLeft+moveStep>divWidth){ eval("document.all.divAds"+nextDnum+".style.clip= 'rect(0,"+divWidth+","+divHeight+",0"+")'") eval("document.all.divAds"+startDnum+ ".style.left="+divWidth*displayImgAmount) eval("document.all.divAds"+ parseInt((nextDnum+1)%imgArr.length)+".style.left= document.all.divAds"+nextDnum+".style.pixelLeft+"+divWidth) startDnum=(++startDnum)%imgArr.length nextDnum=(startDnum+displayImgAmount)%imgArr.length startDivClipLeft=moveStep-(divWidth-startDivClipLeft) nextDivClipRight=moveStep-(divWidth-nextDivClipRight) }else{ startDivClipLeft+=moveStep nextDivClipRight+=moveStep } eval("document.all.divAds"+startDnum+".style.clip= 'rect(0,"+divWidth+","+divHeight+","+startDivClipLeft+")'") eval("document.all.divAds"+nextDnum+".style.clip= 'rect(0,"+nextDivClipRight+","+divHeight+",0)'") } if (outHover){ mvStop() }else{ mvStart() } } //定义显示图片的层 function writeDivs(){ if (ns4){ document.write("<ilayer name=divOuter width=750 height="+divHeight+">") for (i=0;i<imgArr.length;i++){ document.write("<layer name=divAds"+i+">") document.write(imgArr[i]+" ") document.write("</layer>") } document.write("</ilayer>") document.close() for (i=displayImgAmount;i<imgArr.length;i++){ eval("document.divOuter.document.divAds"+i+".clip.right=0") } }else{ document.write("<div id=divOuter style='position:relative' width=750 height="+divHeight+">") for (i=0;i<imgArr.length;i++){ document.write("<div id=divAds"+i+ " style='position:absolute;clip:rect(0,"+divWidth+","+divHeight+",0)'>") document.write(imgArr[i]+" ") document.write("</div>") } document.write("</div>") for (i=displayImgAmount;i<imgArr.length;i++){ eval("document.all.divAds"+i+ ".style.clip='rect(0,0,"+divHeight+",0)'") } } } writeDivs(); initDivPlace();
需要在body中添加启动事件,代码如下所示: </script> </head> <body onload="mvStart()"> <p> 调试其他进程的能力赋予您极广泛的权力,这是无法通过其他途经获得的, 在进行远程调试时更是如此。恶意的调试器可能对正在调试的计算机造成大范围的损害。 因此,对可能进行调试的人要有所限制。有关更多信息,请参见<a >远程调试权限</a>。</p> <p> 但是,许多开发人员没有意识到安全威胁也可以从相反的方向产生。 调试对象进程中的恶意代码可能危害调试计算机的安全:有许多必须防范的不道德的安全利用。</p> <h1 > 安全性最佳做法</h1> </body> </html>
【运行效果】
【难点剖析】
本例的重点是ilayer层和Array数组。其中数组是JavaScript的重要对象,用来存储一系列类型相同的数据。ilayer层具有三维的感觉,使设计者能够对相互重叠的层组成的三维层进行精确地控制,这些相互重叠的层是Web页上透明或不透明的内容。
【源码下载】
为了JS代码的准确性,请点击:JS实现循环滚动显示图片 进行本实例源码下载