JS滚动图片代码(含横向和纵向)

本文介绍了如何使用HTML和JavaScript实现网页中横向及纵向元素的滚动效果。通过代码示例展示了具体的实现过程,包括设置HTML结构、CSS样式以及关键的JavaScript逻辑。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.横向

<div id=demo style="overflow:hidden;width:200px;border:2px solid #e0e0e0;padding:2px;" onmouseover="stopscroll();" 

onmouseout="doscroll()"> 
<div id="demo1" style="white-space:nowrap;padding:0;"> 
<a href="javascript:alert('发表新贴');"><img src="图片URL" height=20 width=104 

border=0></a> 
<a href="javascript:alert('发表回复');"><img src="图片URL" height=20 width=104 

border=0></a> 
</div> 
</div> 
<!--滚动的javascript--> 
<script> 
var t=demo.scrollWidth 
demo1.innerHTML+=demo1.innerHTML 
function doMarquee() 
{ 
demo.scrollLeft=demo.scrollLeft<demo.scrollWidth-demo.offsetWidth?demo.scrollLeft+1:t-demo.offsetWidth 
} 
function doscroll() 
{ 
   sc=setInterval(doMarquee,20) 
} 
function stopscroll() 
{ 
   clearInterval(sc) 
} 
doscroll() 
</script> 
<!--滚动的javascript结束--> 

 

2.纵向

  <div id="demo" style="height:110px; overflow:hidden "> 
    <div id="demo1"> 
<a href="javascript:alert('发表新贴');"><img src="图片URL" height=20 width=104 

border=0></a> 
<a href="javascript:alert('发表回复');"><img src="图片URL" height=20 width=104 

border=0></a> 
</div><div id="demo2"></div> 

<!--滚动的javascript--> 
<script> 
var speed=100 
demo2.innerHTML=demo1.innerHTML 
function Marquees(){ 
if(demo2.offsetTop-demo.scrollTop<=0) 
demo.scrollTop-=demo1.offsetHeight 
else{ 
demo.scrollTop++ 
} 
} 
var MyMars=setInterval(Marquees,speed) 
demo.onmouseover=function() { clearInterval(MyMars) } 
demo.onmouseout=function() { MyMars=setInterval(Marquees,speed) } 
zlselect('6'); 
</script><!--滚动的javascript结束--> 
</div> 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值