我需要一个使用js和HTML5制作一个图片自动轮播有三组
时间: 2024-03-12 12:45:09 浏览: 19
好的,下面是一个使用JavaScript和HTML5制作的图片自动轮播,包括三组图片。
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 class="mySlides fade">
<img src="image4.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image5.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image6.jpg" style="width:100%">
</div>
<!-- 第三组图片 -->
<div class="mySlides fade">
<img src="image7.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image8.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="image9.jpg" style="width:100%">
</div>
</div>
```
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); // 切换图片的时间间隔为3秒
}
```
CSS代码:
```css
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.mySlides {
display: none;
}
```
这个代码中的图片轮播效果会自动播放,并且每隔3秒钟切换一次图片。你可以根据需要调整轮播图片的数量、时间间隔以及其他样式效果。