| 您的位置:网页制作素材代码_图形循环滚动代码
图形循环滚动代码
发表时间:2007-10-16 15:22:59
说明:<img src=sto/001.jpg border=0> src=图片地址
<script language="javascript"> imgArr=new Array() imgArr[0]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=sto/001.jpg border=0></a>" imgArr[1]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=sto/002.jpg border=0></a>" imgArr[2]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=sto/003.jpg border=0></a>" imgArr[3]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=sto/004.jpg border=0></a>" imgArr[4]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=sto/005.jpg border=0></a>" imgArr[5]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=sto/006.jpg border=0></a>" imgArr[6]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=sto/007.jpg border=0></a>" imgArr[7]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=sto/008.jpg border=0></a>" imgArr[8]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=sto/009.jpg border=0></a>" imgArr[9]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=sto/0010.jpg border=0></a>" imgArr[10]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=sto/0011.jpg border=0></a>" var moveStep=4 //步长,单位:pixel var moveRelax=100 //移动时间间隔,单位:ms
ns4=(document.layers)?true:false
var displayImgAmount=4 //视区窗口可显示个数 var divWidth=150 //每块图片占位宽 var divHeight=200 //每块图片占位高
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)'") } } } </script> <BODY onload=javascript:mvStart()> <SCRIPT language=javascript>writeDivs();initDivPlace();</SCRIPT>
来源:
作者:
作者:102
|