图片不间断上下滚动效果的实现代码_电子相册从上往下滚动的代码-优快云博客

本文链接：https://blog.youkuaiyun.com/coffeeing/article/details/4522585

本文介绍了两种实现网页元素向下滚动效果的方法。第一种方法通过设置定时器不断更新滚动条位置来达到滚动效果，并在鼠标悬停时停止滚动。第二种方法同样采用定时器更新滚动条位置，但使用不同的条件判断来控制滚动行为。

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

一、向下滚动的代码示例

<title>My JSP 'picScrollDown.html' starting page</title>

</head>

<body>

</body>
<script>
    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>
</html>

二、向下滚动的代码示例：

<DIV id=demo onmouseover=ii=1 style="OVERFLOW: hidden; HEIGHT: 500px" onmouseout=ii=0>
<DIV id=demo1>
<div align="center">
<a href='#' target='_blank'><img src='images/k.jpg' width='125' height='125' vspace='5' border='0' class='tu'></a><br><a href='#' target='_blank'>图片1</a><br>
<a href='#' target='_blank'><img src='images/j.jpg' width='125' height='125' vspace='5' border='0' class='tu'></a><br><a href='#' target='_blank'>图片2</a><br>
<a href='#' target='_blank'><img src='images/I.jpg' width='125' height='125' vspace='5' border='0' class='tu'></a><br><a href='#' target='_blank'>图片3</a><br>
<a href='#' target='_blank'><img src='images/h.jpg' width='125' height='125' vspace='5' border='0' class='tu'></a><br><a href='#' target='_blank'>图片4</a><br>
<a href='#' target='_blank'><img src='images/g.jpg' width='125' height='125' vspace='5' border='0' class='tu'></a><br><a href='#' target='_blank'>图片5</a><br>
</div>
</DIV>
<DIV id=demo2></DIV>
<SCRIPT>
var ii=0;t=demo.scrollTop
demo2.innerHTML=demo1.innerHTML
function qswhMarquee(){
if (ii==1)return
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else
demo.scrollTop++
}
setInterval(qswhMarquee,20)
</SCRIPT>