前言
项目需求背景
- 自动轮播，定时切换图片或图文块。
- 手动切换，允许用户通过点击按钮来切换图片或图文块。
- 图片或图文块的缩略图显示，提供直观的预览。
CSS3 3D基础知识介绍
1. 什么是CSS3 3D？
CSS3引入了3D变换功能，允许我们通过rotateX、rotateY等属性在三维空间中对元素进行操作。这对于实现轮播特效中的3D效果非常有用。
2. 主要使用的CSS属性
transform: 用于应用2D或3D变换。transition: 用于定义元素过渡效果的时长和性质。animation: 用于定义复杂动画的序列。
使用HTML和CSS搭建轮播结构
HTML结构
<div class="carousel">
<div class="carousel-slide">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="carousel-slide">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="carousel-slide">
<img src="image3.jpg" alt="Image 3">
</div>
<a class="carousel-prev" onclick="changeSlide(-1)">❮</a>
<a class="carousel-next" onclick="changeSlide(1)">❯</a>
</div>
CSS样式
.carousel {
position: relative;
width: 100%;
max-width: 600px;
margin: auto;
overflow: hidden;
}
.carousel-slide {
width: 100%;
display: none;
}
.carousel-slide img {
width: 100%;
height: auto;
}
.carousel-prev, .carousel-next {
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
color: white;
background-color: rgba(0,0,0,0.5);
padding: 10px;
}
.carousel-prev {
left: 10px;
}
.carousel-next {
right: 10px;
}
让轮播动起来：CSS3动画
CSS动画
.carousel-slide {
transition: opacity 1s ease-in-out;
}
.carousel-slide.active {
display: block;
opacity: 1;
}
JavaScript控制
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("carousel-slide");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 3000); // Change image every 3 seconds
}
function changeSlide(n) {
showSlides(slideIndex += n);
}