本资源提供了一套使用DIV、CSS及JavaScript编写的左侧横向自动连续滚动效果代码,适用于网页设计中新闻列表或图片展示等多种场景。
向左滚动-完整DIV+CSS+JS不间断横向滚动代码
需要实现一个使用DIV、CSS和JavaScript的不间断横向滚动效果。以下是一个简单的示例:
HTML:
```html
```
CSS:
```css
#scrollingDiv {
width: 300px; /* 设置滚动容器的宽度 */
overflow: hidden;
}
.content {
float: left;
}
```
JavaScript:
```javascript
window.onload = function() {
var scrollingDiv = document.getElementById(scrollingDiv);
var contentWidth = document.getElementsByClassName(content)[0].offsetWidth * document.getElementsByClassName(content).length; // 获取所有内容的总宽度
var scrollLeftValue = 0;
setInterval(function(){
if(scrollLeftValue < contentWidth) {
scrollLeftValue++;
scrollingDiv.scrollLeft += 1;
} else {
scrollLeftValue = 0;
scrollingDiv.scrollLeft = 0; // 滚动到初始位置
}
},30);
};
```
以上代码创建了一个不间断向左滚动的内容展示区域。