当前位置:软件学堂 > 资讯首页 > 网络编程 > 编程其他 > JS实现循环滚动显示图片

JS实现循环滚动显示图片

2012/11/8 11:59:27作者:佚名来源:网络

移动端

【实例名称】

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实现循环滚动显示图片 进行本实例源码下载 

标签: JS实现  图片