上一篇
html 如何循环播放
在HTML中，要实现循环播放，可以使用JavaScript和CSS，以下是一个简单的示例：
1、创建一个HTML文件，添加以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>循环播放示例</title>
<style>
.slider {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.slider img {
width: 100%;
height: 100%;
display: none;
}
.slider img.active {
display: block;
}
</style>
</head>
<body>
<div class="slider">
<img src="image1.jpg" alt="图片1" class="active">
<img src="image2.jpg" alt="图片2">
<img src="image3.jpg" alt="图片3">
</div>
<script>
const images = document.querySelectorAll('.slider img');
let currentIndex = 0;
function changeImage() {
images[currentIndex].classList.remove('active');
currentIndex = (currentIndex + 1) % images.length;
images[currentIndex].classList.add('active');
}
setInterval(changeImage, 3000); // 设置轮播间隔时间，单位为毫秒
</script>
</body>
</html>
2、在这个示例中，我们使用了一个名为.slider的div元素来包含所有的图片，每张图片都有一个img标签，其中第一张图片具有active类，表示它是当前显示的图片。
3、我们使用CSS设置了.slider的宽度、高度和溢出属性，以及图片的宽度和高度。.active类的样式使得只有具有该类的图片才会显示。
4、在JavaScript部分，我们首先获取了所有的图片元素，并定义了一个变量currentIndex来存储当前显示的图片索引，我们创建了一个名为changeImage的函数，该函数会移除当前图片的active类，并将索引递增，以便下次调用时显示下一张图片，我们使用setInterval函数每隔一定的时间（例如3000毫秒）调用changeImage函数，实现循环播放效果。
本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/286930.html
