网页上下 左右循环滚动代码

在网页设计与开发领域，实现页面元素的循环滚动效果是一种常见的需求，尤其在广告轮播、新闻滚动条、产品展示等场景中应用广泛。本文将深入解析如何利用HTML、CSS和JavaScript来创建上下左右循环滚动的代码，帮助读者理解其工作原理并掌握实际操作。 ### 一、上下滚动循环 #### HTML结构 ```html <div id="demo" style="overflow:hidden; height:450px; width:205px;"> <div id="demo1" valign="top">内容区域</div> <div id="demo2" valign="top"></div> </div> ``` 上述代码定义了两个`<div>`元素，其中`#demo1`用于存放实际显示的内容，而`#demo2`用于复制`#demo1`的内容，从而实现滚动到顶部时内容无缝衔接的效果。 #### CSS样式 ```css #demo { overflow: hidden; height: 450px; width: 205px; } ``` 这里设置`overflow: hidden;`属性，确保超出`#demo`容器的内容被隐藏，从而达到滚动效果。 #### JavaScript逻辑 ```javascript var speed = 30; var demo = document.getElementById('demo'); var demo1 = document.getElementById('demo1'); var demo2 = document.getElementById('demo2'); demo2.innerHTML = demo1.innerHTML; function Marquee() { if (demo2.offsetHeight - 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); }; ``` 这段JavaScript代码首先复制`#demo1`的内容到`#demo2`，然后通过不断改变`#demo`的`scrollTop`值实现垂直滚动。当滚动至顶部时，通过调整`scrollTop`使其回到初始位置，形成循环滚动。 ### 二、左右滚动循环 #### HTML结构 ```html <div id="demo" style="overflow:hidden; height:100px; width:850px;"> <table align="left" cellpadding="0" cellspacing="0" border="0"> <tr> <td id="demo1" valign="top">内容区域</td> <td id="demo2" valign="top"></td> </tr> </table> </div> ``` 与上下滚动类似，这里使用`<table>`和`<td>`元素来构建内容框架，其中`#demo1`和`#demo2`分别用于原始内容和复制内容。 #### CSS样式 ```css #demo { overflow: hidden; height: 100px; width: 850px; } ``` 样式设置与上文一致，确保内容超出部分被隐藏。 #### JavaScript逻辑 ```javascript var speed = 30; var demo = document.getElementById('demo'); var demo1 = document.getElementById('demo1'); var demo2 = document.getElementById('demo2'); 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); }; ``` 左右滚动的JavaScript逻辑与上下滚动相似，主要区别在于使用`scrollLeft`属性代替`scrollTop`，实现水平方向的滚动效果。 ### 结语 通过以上分析，我们可以看出，无论是上下还是左右循环滚动，其核心思路都是通过复制内容，利用JavaScript定时调整滚动位置，结合鼠标事件控制滚动行为，最终实现流畅且无限循环的滚动效果。开发者可以根据具体需求调整速度（`speed`变量）和滚动方向，从而创造出丰富多彩的动态网页效果。