20、图形循环滚动代码

20、图形循环滚动代码

<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>

 

Write a comment

Comments: 0