图片连续循环滚动代码（向上、下、左、右）

最新推荐文章于 2021-06-09 19:06:52 发布

weixin_33768481

最新推荐文章于 2021-06-09 19:06:52 发布

阅读量140

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hzuIT/articles/852064.html

版权

向上：

< div id =demo style ="overflow:hidden; width:128px; height:300px;" >

< div id =demo1 >

< img src ="/529blog/gfjs.gif" >< br >< img src ="/529blog/bxtt.gif" >< br >< img src ="/529blog/bzjd.gif" >< br >

</ div >

< div id =demo2 ></ div >

</ div >

< script language ="javascript" >

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee()

{

if(demo2.offsetTop-demo.scrollTop<=0)

demo.scrollTop-=demo1.offsetHeight

else

{

demo.scrollTop++

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function()

{clearInterval(MyMar)}

demo.onmouseout=function()

{MyMar=setInterval(Marquee,speed)}

</ script >

向下：

< div id =demo style ="overflow:hidden; width:128px; height:300px;" >

< div id =demo1 >

< img src ="/529blog/gfjs.gif" >< br >< img src ="/529blog/bxtt.gif" >< br >< img src ="/529blog/bzjd.gif" >< br >

</ div >

< div id =demo2 ></ div >

</ div >

< script language ="javascript" >

var speed=30

demo2.innerHTML=demo1.innerHTML

demo.scrollTop=demo.scrollHeight

function Marquee()

{

if(demo1.offsetTop-demo.scrollTop>=0)

demo.scrollTop+=demo2.offsetHeight

else

{

demo.scrollTop--

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function()

{clearInterval(MyMar)}

demo.onmouseout=function()

{MyMar=setInterval(Marquee,speed)}

</ script >

向左：

< div id =demo style ="overflow:hidden;height:100px;width:300px;" >< table align =left

cellpadding =0 cellspace =0 border =0 >< tr >< td id =demo1 valign =top >< img src ="/529blog/gfjs.gif" >< img

src ="/529blog/bxtt.gif" >< img src ="/529blog/bzjd.gif" >< img src ="/529blog/gfjs.gif" >< img src ="/529blog/bxtt.gif" >< img

src ="/529blog/bzjd.gif" ></ td >< td id =demo2 valign =top ></ td ></ tr ></ table ></ div >

< script >

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee()

{

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else

{

demo.scrollLeft++

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function()

{clearInterval(MyMar)}

demo.onmouseout=function()

{MyMar=setInterval(Marquee,speed)}

</ script >

向右：

< div id =demo style ="overflow:hidden;height:100px;width:300px;" >< table align =left

cellpadding =0 cellspace =0 border =0 >< tr >< td id =demo1 valign =top >< img src ="/529blog/gfjs.gif" >< img

src ="/529blog/bxtt.gif" >< img src ="/529blog/bzjd.gif" >< img src ="/529blog/gfjs.gif" >< img src ="/529blog/bxtt.gif" >< img

src ="/529blog/bzjd.gif" ></ td >< td id =demo2 valign =top ></ td ></ tr ></ table ></ div >

< script >

var speed=30

demo2.innerHTML=demo1.innerHTML

demo.scrollLeft=demo.scrollWidth

function Marquee()

{

if(demo.scrollLeft<=0)

demo.scrollLeft+=demo2.offsetWidth

else

{

demo.scrollLeft--

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function()

{clearInterval(MyMar)}

demo.onmouseout=function()

{MyMar=setInterval(Marquee,speed)}

</ script >

转载于:https://www.cnblogs.com/hzuIT/articles/852064.html

weixin_33768481

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫