HTML轮番图事例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图示例</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
}
.slider {
width: 100%;
height: 300px;
overflow: hidden;
position: relative;
}
.slider img {
width: 100%;
height: 300px;
display: none;
}
.slider img.active {
display: block;
}
.slider .prev, .slider .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
color: white;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
cursor: pointer;
}
.slider .prev {
left: 10px;
}
.slider .next {
right: 10px;
}
</style>
<script>
function changeSlide() {
var images = document.querySelectorAll('.slider img');
var currentIndex = 0;
for (var i = 0; i < images.length; i++) {
images[i].classList.remove('active');
}
currentIndex++;
if (currentIndex >= images.length) {
currentIndex = 0;
}
images[currentIndex].classList.add('active');
setTimeout(changeSlide, 3000);
}
window.onload = changeSlide;
</script>
</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">
<span class="prev"><</span>
<span class="next">></span>
</div>
</body>
</html>
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。