原生js写出页面底部图片不间断向左滚动展示
时间: 2023-07-16 11:14:07 浏览: 61
可以使用原生 JavaScript 和 CSS 实现页面底部图片不间断向左滚动展示。具体实现步骤如下:
1. 首先,在 HTML 中添加一个容器元素,用于包含需要滚动的图片。例如:
```html
<div id="scroll-container">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<!-- 添加更多图片... -->
</div>
```
2. 使用 CSS 将容器元素设置为横向滚动,并隐藏滚动条。例如:
```css
#scroll-container {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap; /* 让所有图片在一行上 */
-webkit-overflow-scrolling: touch; /* 支持触摸屏的平滑滚动 */
}
```
3. 使用 JavaScript 自动滚动图片。首先,获取容器元素和所有图片元素:
```javascript
var container = document.getElementById('scroll-container');
var images = container.getElementsByTagName('img');
```
然后,设置一个计时器,每隔一定时间滚动一定距离(图片的宽度加上一定的间距),直到滚动到最后一张图片时,重新开始滚动。
```javascript
var scrollDistance = images[0].offsetWidth + 10; // 每次滚动的距离(图片宽度 + 10 像素间距)
var currentPosition = 0; // 当前滚动位置
setInterval(function() {
currentPosition += scrollDistance;
if (currentPosition >= container.scrollWidth) { // 到达最后一张图片时,重新开始滚动
currentPosition = 0;
}
container.scrollLeft = currentPosition;
}, 3000); // 每隔 3 秒滚动一次
```
完整的代码示例如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片滚动展示</title>
<style>
#scroll-container {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
img {
margin-right: 10px;
}
</style>
</head>
<body>
<div id="scroll-container">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<!-- 添加更多图片... -->
</div>
<script>
var container = document.getElementById('scroll-container');
var images = container.getElementsByTagName('img');
var scrollDistance = images[0].offsetWidth + 10;
var currentPosition = 0;
setInterval(function() {
currentPosition += scrollDistance;
if (currentPosition >= container.scrollWidth) {
currentPosition = 0;
}
container.scrollLeft = currentPosition;
}, 3000);
</script>
</body>
</html>
```
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)