web前端图片自动滚动
时间: 2024-10-17 07:10:41 浏览: 6
Web前端图片自动滚动通常是指通过JavaScript、CSS动画或者轮播插件来实现图片连续不断地在页面上滚动展示的效果。下面是一个简单的HTML、CSS和JavaScript示例:
```html
<div class="image-carousel">
<img src="img1.jpg" alt="Image 1">
<img src="img2.jpg" alt="Image 2">
<!-- 添加更多图片 -->
</div>
<style>
.image-carousel {
width: 100%;
overflow: hidden;
}
.image-carousel img {
display: none; /* 隐藏所有图片 */
animation: slide 5s infinite; /* 设置动画持续时间和无限循环 */
}
@keyframes slide {
0% { opacity: 0; transform: translateX(0); }
100% { opacity: 1; transform: translateX(-100%); }
}
</style>
<script>
let images = document.querySelectorAll('.image-carousel img');
let index = 0;
function showNextImage() {
images[index].style.display = 'none';
index = (index + 1) % images.length;
images[index].style.display = 'block';
images[index].style.transform = 'translateX(0)';
}
setInterval(showNextImage, 5000); // 每隔5秒切换一次图片
</script>
```
在这个例子中,当页面加载完毕后,每隔5秒钟,会自动切换到下一张图片,形成滚动效果。
阅读全文