html5轮播图循环播放代码
时间: 2023-05-22 07:02:36 浏览: 43
以下是一个基本的 HTML5 轮播图循环播放的代码示例,可以适应大多数现代浏览器:
```
<!DOCTYPE html>
<html>
<head>
<title>HTML5 轮播图循环播放</title>
<style>
/* 轮播图样式 */
#slider {
overflow: hidden;
}
#slider .slides {
display: flex;
}
#slider .slides img {
width: 100%;
}
</style>
</head>
<body>
<div id="slider">
<div class="slides">
<img src="slide1.jpg" alt="Slide 1">
<img src="slide2.jpg" alt="Slide 2">
<img src="slide3.jpg" alt="Slide 3">
</div>
</div>
<script>
// 轮播图脚本
var slider = document.getElementById('slider');
var slideIndex = 0;
var slides = slider.querySelectorAll('.slides img');
var slideCount = slides.length;
// 初始化轮播图
function initSlider() {
slides[0].classList.add('active');
setInterval(function() {
slideIndex++;
if (slideIndex >= slideCount) {
slideIndex = 0;
}
for (var i = 0; i < slideCount; i++) {
slides[i].classList.remove('active');
}
slides[slideIndex].classList.add('active');
}, 5000);
}
// 开始轮播图
initSlider();
</script>
</body>
</html>
```