web怎么让图片自动滑动
时间: 2023-10-01 10:11:29 浏览: 62
您可以使用CSS动画来实现图片的自动滑动效果。以下是一个简单的示例:
HTML代码:
```html
<div class="slideshow-container">
<div class="mySlides fade">
<img src="image1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image3.jpg" style="width:100%">
</div>
</div>
```
CSS代码:
```css
.slideshow-container {
max-width: 700px;
position: relative;
margin: auto;
}
.mySlides {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.mySlides img {
vertical-align: middle;
}
/* 淡入淡出效果 */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
```
JavaScript代码:
```javascript
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 3000); // 切换图片的时间间隔,单位毫秒
}
```
上述代码中,使用了CSS动画实现了图片的淡入淡出效果,JavaScript代码则设置了定时器来实现图片的自动切换。您可以根据需要自行调整代码中的参数和样式。