Javascript实现图片不间断滚动的代码
蛮优秀的一段效果代码,可以上下左右滚动,收藏了!!
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>滚动测试</title> <scripttype="text/javascript"> /** *@paraobj目标对象如:demo,deml1,demo2中的"demo"可任意,只要不重复 * *@paraspeed滚动速度越大越慢 * *@paradirection滚动方向包括:left,right,down,up * *@paraobjWidth总可见区域宽度 * *@paraobjHeight总可见区域高度 * *@parafilePath存放滚动图片的路径(如果是自动获取文件夹里的图片滚动) * *@paracontentById对某id为contentById下的内容进行滚动此滚动与filePath不能共存请注意 * *@para用法实例scrollObject("res",50,"up",470,200,"","resource")对contentById(resource)下内容进行滚动 * *@para用法实例scrollObject("res",50,"up",470,200,"d:\\images\\","")对filePath(images)下内容自动获取并进行滚动,目前只支持ie */ var$=function(id){returndocument.getElementById(id)} //滚动 functionscrollObject(obj,speed,direction,objWidth,objHeight,filePath,contentById) { //执行初始化 if(direction=="up"||direction=="down") document.write(UDStructure()); else document.write(LRStructure()); vardemo=$(obj); vardemo1=$(obj+"1"); vardemo2=$(obj+"2"); varspeed=speed; $(contentById).style.display="none" demo.style.overflow="hidden"; demo.style.width=objWidth+"px"; demo.style.height=objHeight+"px"; demo.style.margin="0auto"; if(filePath!="") demo1.innerHTML=file(); if(contentById!="") demo1.innerHTML=$(contentById).innerHTML; demo2.innerHTML=demo1.innerHTML; //左右滚动 functionLRStructure() { var_html=""; _html+="<divid='"+obj+"'>"; _html+="<tableborder='0'align='left'cellpadding='0'cellspacing='0'cellspace='0'>"; _html+="<tr>"; _html+="<tdnowrap='nowrap'id='"+obj+"1'>"; //此处是放要滚动的内容 _html+="</td>"; _html+="<tdnowrap='nowrap'id='"+obj+"2'></td>"; _html+="</tr>"; _html+="</table>"; _html+="</div>"; return_html; } //上下滚动的结构 functionUDStructure() { var_html=""; _html+="<divid="+obj+">"; _html+="<tableborder='0'align='left'cellpadding='0'cellspacing='0'cellspace='0'>"; _html+="<tr>"; _html+="<tdid='"+obj+"1'>"; //此处是放要滚动的内容 _html+="</td>"; _html+="</tr>"; _html+="<tr>"; _html+="<tdid='"+obj+"2'></td>"; _html+="</tr>"; _html+="</table>"; _html+="</div>"; return_html; } //取得文件夹下的图片 functionfile() { vartbsource=filePath;//本地文件夹路径 filePath=filePath.toString(); if(filePath=="") return""; varimgList=""; varobjFSO=newActiveXObject('Scripting.FileSystemObject'); //文件夹是否存在 if(!objFSO.FolderExists(tbsource)) { alert("<"+tbsource+">该文件夹路径不存在,或者路径不能含文件名!"); objFSO=null; return; } varobjFolder=objFSO.GetFolder(tbsource); varcolFiles=newEnumerator(objFolder.Files); varre_inf1=/\.jpg$/;//验证文件夹文件是否jpg文件 for(;!colFiles.atEnd();colFiles.moveNext())//读取文件夹下文件 { varobjFile=colFiles.item(); if(re_inf1.test(objFile.Name.toLowerCase())) { imgList+="<imgsrc="+filePath+"/"+objFile.Name+">"; } } returnimgList; } //向左滚 functionleft() { if(demo2.offsetWidth-demo.scrollLeft<=0) { demo.scrollLeft-=demo1.offsetWidth; } else { demo.scrollLeft++; } } //向右滚 functionright() { if(demo.scrollLeft<=0) { demo.scrollLeft+=demo2.offsetWidth; } else { demo.scrollLeft-- } } //向下滚 functiondown() { if(demo1.offsetTop-demo.scrollTop>=0) { demo.scrollTop+=demo2.offsetHeight; } else { demo.scrollTop-- } } //向上滚 functionup() { if(demo2.offsetTop-demo.scrollTop<=0) { demo.scrollTop-=demo1.offsetHeight; } else { demo.scrollTop++ } } //切换方向 functionswichDirection() { switch(direction) { case"left": returnleft(); break; case"right": returnright(); break; case"up": returnup(); break; default: returndown(); } } //重复执行 varmyMarquee=setInterval(swichDirection,speed); //鼠标悬停 demo.onmouseover=function(){clearInterval(myMarquee);} //重新开始滚动 demo.onmouseout=function(){myMarquee=setInterval(swichDirection,speed);} } </script> </head> <body> <divid="img"> <tablewidth="1000"border="0"align="center"cellpadding="5"cellspacing="0"> <tr> <tdwidth="200"><imgsrc="http://attach.e.iciba.com/attachment/200910/22/4188617_12561994098532.jpg"alt=""width="200"height="150"/></td> <tdwidth="200"><imgsrc="http://pica.nipic.com/2008-05-27/2008527145211519_2.jpg"alt=""width="200"height="150"/></td> <tdwidth="200"><imgsrc="http://pic4.nipic.com/20090823/383152_215728074589_2.jpg"alt=""width="200"height="150"/></td> <tdwidth="200"><imgsrc="http://pic8.nipic.com/20100628/4643449_170245009531_2.jpg"alt=""width="200"height="150"/></td> <tdwidth="200"><imgsrc="http://pica.nipic.com/2008-05-30/20085309524648_2.jpg"alt=""width="200"height="150"/></td> </tr> </table> </div> <scripttype="text/javascript"> scrollObject("sr",50,"right",800,160,"","img") </script> </body> </html>
以上就是本文的全部内容,了解更多JavaScript的语法,大家可以查看:《JavaScript参考教程》、《JavaScript代码风格指南》,也希望大家多多支持毛票票。