写一个轮播的html页面
<!DOCTYPE html>
<html>
<head>
<title>轮播页面</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.container {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
<pre><code> .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide.active {
opacity: 1;
z-index: 1;
}
.controls {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: center;
align-items: center;
}
.control {
margin: 0 10px;
cursor: pointer;
}
.control.active {
font-weight: bold;
}
</style>
</code></pre>
</head>
<body>
<div class="container">
<div class="slide active" style="background-image: url('https://images.unsplash.com/photo-1610642479169-8c8ede77a64a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8c3RvcmV8ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80')"></div>
<div class="slide" style="background-image: url('https://www.w3schools.com/w3images/nature.jpg')"></div>
<div class="slide" style="background-image: url('https://www.w3schools.com/w3images/mountains.jpg')"></div>
<div class="controls">
<div class="control active" data-slide="0">●</div>
<div class="control" data-slide="1">●</div>
<div class="control" data-slide="2">●</div>
</div>
</div>
<pre><code><script type="text/javascript">
let slides = document.querySelectorAll('.slide');
let controls = document.querySelectorAll('.control');
let currentSlide = 0;
function showSlide(n) {
if (n > slides.length - 1) {
n = 0;
} else if (n < 0) {
n = slides.length - 1;
}
slides[currentSlide].classList.remove('active');
controls[currentSlide].classList.remove('active');
slides[n].classList.add('active');
controls[n].classList.add('active');
currentSlide = n;
}
function nextSlide() {
showSlide(currentSlide + 1);
}
function prevSlide() {
showSlide(currentSlide - 1);
}
controls.forEach(function(control) {
control.addEventListener('click', function() {
showSlide(parseInt(control.getAttribute('data-slide')));
});
});
setInterval(nextSlide, 5000);
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/bDxl 著作权归作者所有。请勿转载和采集!