js+div实现图片滚动效果代码
横向
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | < 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结束--> |
纵向
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | < 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 > |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具