横向不间断滚动广告

原创 2006年06月01日 13:08:00
<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=http://image0.sina.com.cn/images/bizsite/promote/l/lisababy6617.gif border=0></a>"
imgArr[1]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/t/testool4434.gif border=0></a>"
imgArr[2]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/s/sxyuda6549.gif border=0></a>"
imgArr[3]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/q/qeji4041.gif border=0></a>"
imgArr[4]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/i/ieasytraining3984.gif border=0></a>"
imgArr[5]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/t/trainings1442.gif border=0></a>"
imgArr[6]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/r/renhebj002indexasp2486.gif border=0></a>"
imgArr[7]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/e/efeedlink6085.gif border=0></a>"
imgArr[8]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/k/kaixingou5811.gif border=0></a>"
imgArr[9]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/h/9happyindex8htm5912.gif border=0></a>"
imgArr[10]="<a href=# onmouseMove='javascript:outHover=true' onMouseover='javascript:outHover=true' onMouseout='javascript:outHover=false;mvStart()'><img src=http://image0.sina.com.cn/images/bizsite/promote/c/chinaroom6034.gif border=0></a>"
var moveStep=4        //步长,单位:pixel
var moveRelax=100    //移动时间间隔,单位:ms

ns4=(document.layers)?true:false

var displayImgAmount=4    //视区窗口可显示个数
var divWidth=125    //每块图片占位宽
var divHeight=60    //每块图片占位高

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>

DIV+CSS+JS实现不间断横向滚动代码

DIV+CSS+JS实现不间断横向滚动代码 横向不间断滚动DIV CSS代码-DIVCSS5 .scroll_div {width:600px; height:49px;margin...
  • river131
  • river131
  • 2013年02月23日 13:43
  • 765

html中的横向广告滚动字幕

html: 加粉神器值得你拥有!得粉丝者,得微信天下!!! js: var speed=50; marquePic2.inne...
  • qq_30552993
  • qq_30552993
  • 2016年01月13日 17:29
  • 2129

JS不间断横向滚动实现代码

.outerdiv { width: 100%; } .scroll_div { width: 200px; height: 70p...
  • zhuchunyan_aijia
  • zhuchunyan_aijia
  • 2016年05月03日 18:49
  • 1849

div+css+js横向不间断滚动

横向不间断滚动DIV CSS代码-DIVCSS5 .scroll_div {width:600px; height:49px;margin:0 auto; overflow: hidden; w...
  • paopao_2017
  • paopao_2017
  • 2018年01月12日 11:09
  • 16

横向不间断滚动DIV

1 DOCTYPE html> 2 html> 3 head> 4 meta http-equiv="Content-Type" content="text/html; ch...
  • xincppba8
  • xincppba8
  • 2014年11月11日 16:22
  • 267

文字横向滚动效果

/*My Marquee CSS Start*/ .my_marquee_info{width:200px;border:#987654 solid 1px;padding:20px 3px 3px...
  • avinegar
  • avinegar
  • 2014年03月06日 11:36
  • 2175

网页特效:横向不间断滚动

 横向不间断滚动DIV CSS代码-DIVCSS5 .scroll_div {width:600px; height:49px;margin:0 a...
  • Amos318
  • Amos318
  • 2014年06月29日 21:57
  • 409

[Android]使用HorizontalScrollView实现广告栏Banner及相关原理分析

现在的App中,广告栏Banner的使用还是挺广泛的,用于展示各种广告、活动推荐等。使用HorizontalScrollView可以很简单的实现一个可自动播放、可滑动、可点击的广告栏Banner,这个...
  • pur_e
  • pur_e
  • 2016年02月28日 21:20
  • 2817

不间断图片横向滚动特效代码

body{margin:0px;} ul{list-style:none; border:0; padding:0px; margin:0px;} li{list-style:none; float:...
  • Honey_Potter
  • Honey_Potter
  • 2016年12月20日 15:02
  • 199

不间断无缝滚动代码(横向、…

相当简洁 使用也方便原文地址:不间断无缝滚动代码(横向、竖向)作者:鑫人 一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1...
  • dongzi502
  • dongzi502
  • 2014年01月15日 16:10
  • 286
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:横向不间断滚动广告
举报原因:
原因补充:

(最多只允许输入30个字)