打造简易HTML+CSS轮播图效果

11个月前更新

077078

要实现一个简单的轮播图（Carousel）效果，你可以使用 HTML、CSS 和一些简单的 JavaScript（虽然你只提到了 HTML 和 CSS，但轮播图的动态效果通常需要使用到 JavaScript）。以下是一个基本的示例，展示了如何创建一个简单的轮播图。

HTML 结构


<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>简单轮播图</title>  
<link rel="stylesheet" href="styles.css">  
</head>  
<body>  
  
<div class="carousel">  
  <div class="carousel-slides">  
    <div class="slide active"><img src="image1.jpg" alt="Image 1"></div>  
    <div class="slide"><img src="image2.jpg" alt="Image 2"></div>  
    <div class="slide"><img src="image3.jpg" alt="Image 3"></div>  
  </div>  
</div>  
  
<script src="script.js"></script>  
</body>  
</html>
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>简单轮播图</title>  
<link rel="stylesheet" href="styles.css">  
</head>  
<body>  
  
<div class="carousel">  
  <div class="carousel-slides">  
    <div class="slide active"><img src="image1.jpg" alt="Image 1"></div>  
    <div class="slide"><img src="image2.jpg" alt="Image 2"></div>  
    <div class="slide"><img src="image3.jpg" alt="Image 3"></div>  
  </div>  
</div>  
  
<script src="script.js"></script>  
</body>  
</html>
<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>简单轮播图</title>  
<link rel="stylesheet" href="styles.css">  
</head>  
<body>  
  
<div class="carousel">  
  <div class="carousel-slides">  
    <div class="slide active"><img src="image1.jpg" alt="Image 1"></div>  
    <div class="slide"><img src="image2.jpg" alt="Image 2"></div>  
    <div class="slide"><img src="image3.jpg" alt="Image 3"></div>  
  </div>  
</div>  
  
<script src="script.js"></script>  
</body>  
</html>

CSS 样式 (`styles.css`)


.carousel {  
  position: relative;  
  width: 100%;  
  overflow: hidden;  
}  
  
.carousel-slides {  
  display: flex;  
  transition: transform 0.5s ease;  
}  
  
.slide {  
  flex-shrink: 0;  
  width: 100%;  
  min-width: 100%;  
}  
  
.slide img {  
  width: 100%;  
  height: auto;  
}  
  
.slide.active {  
  display: block;  
}  
  
.slide:not(.active) {  
  display: none;  
}
.carousel {  
  position: relative;  
  width: 100%;  
  overflow: hidden;  
}  
  
.carousel-slides {  
  display: flex;  
  transition: transform 0.5s ease;  
}  
  
.slide {  
  flex-shrink: 0;  
  width: 100%;  
  min-width: 100%;  
}  
  
.slide img {  
  width: 100%;  
  height: auto;  
}  
  
.slide.active {  
  display: block;  
}  
  
.slide:not(.active) {  
  display: none;  
}
.carousel {  
  position: relative;  
  width: 100%;  
  overflow: hidden;  
}  
  
.carousel-slides {  
  display: flex;  
  transition: transform 0.5s ease;  
}  
  
.slide {  
  flex-shrink: 0;  
  width: 100%;  
  min-width: 100%;  
}  
  
.slide img {  
  width: 100%;  
  height: auto;  
}  
  
.slide.active {  
  display: block;  
}  
  
.slide:not(.active) {  
  display: none;  
}

JavaScript 逻辑 (`script.js`)

这里我们假设你希望每 3 秒自动切换到下一张图片。


let currentSlide = 0;  
const slides = document.querySelectorAll('.slide');  
const totalSlides = slides.length;  
  
function nextSlide() {  
  slides.forEach((slide, index) => {  
    slide.classList.remove('active');  
    if (index === currentSlide) {  
      slide.style.display = 'block';  
      slide.classList.add('active');  
    } else {  
      slide.style.display = 'none';  
    }  
  });  
  
  currentSlide = (currentSlide + 1) % totalSlides;  
}  
  
// 自动播放轮播图  
setInterval(nextSlide, 3000);
let currentSlide = 0;  
const slides = document.querySelectorAll('.slide');  
const totalSlides = slides.length;  
  
function nextSlide() {  
  slides.forEach((slide, index) => {  
    slide.classList.remove('active');  
    if (index === currentSlide) {  
      slide.style.display = 'block';  
      slide.classList.add('active');  
    } else {  
      slide.style.display = 'none';  
    }  
  });  
  
  currentSlide = (currentSlide + 1) % totalSlides;  
}  
  
// 自动播放轮播图  
setInterval(nextSlide, 3000);
let currentSlide = 0;  
const slides = document.querySelectorAll('.slide');  
const totalSlides = slides.length;  
  
function nextSlide() {  
  slides.forEach((slide, index) => {  
    slide.classList.remove('active');  
    if (index === currentSlide) {  
      slide.style.display = 'block';  
      slide.classList.add('active');  
    } else {  
      slide.style.display = 'none';  
    }  
  });  
  
  currentSlide = (currentSlide + 1) % totalSlides;  
}  
  
// 自动播放轮播图  
setInterval(nextSlide, 3000);

注意：这个示例非常简单，并且没有包含一些现代轮播图可能具有的功能，如箭头控制、指示器（点）或响应式设计等。如果你想要更复杂的轮播图效果，你可能需要使用像 Swiper.js 或 Bootstrap Carousel 这样的库。

此外，由于 CSS 的 display: none; 和 display: block; 切换可能不是最流畅的方式来实现轮播图动画，因此在实际项目中，你可能会使用 CSS 动画（如 transform: translateX();）或 JavaScript 动画库（如 GSAP 或 anime.js）来实现更平滑的效果。

文中内容均来源于公开资料，受限于信息的时效性和复杂性，可能存在误差或遗漏。我们已尽力确保内容的准确性，但对于因信息变更或错误导致的任何后果，本站不承担任何责任。如需引用本文内容，请注明出处并尊重原作者的版权。

THE END