3D Carousel JavaScript 逻辑步骤归纳
3D轮播图展示，动态添加图片，设置旋转动画，通过JavaScript和CSS3实现图片轮播效果。
初始化图片列表
- 定义一个数组 imgList，其中包含所有图片的 URL。
let imgList = [];
计算每张图片的旋转角度
- 通过 let deg = 360 / imgList.length; 计算每张图片在 360
度圆周上应旋转的角度。这个角度将用于后续设置每个 .carousel-item 的初始 3D 变换和动画关键帧。
let deg = 360 / imgList.length;
获取轮播图的 DOM 元素
- 使用 document.getElementsByClassName(“carousel”)[0]; 获取轮播图的 DOM元素，并将其存储在变量 carouselDom 中。
let carouselDom = document.getElementsByClassName("carousel")[0];
隐藏轮播图容器
- 在添加图片之前，通过 carouselDom.style.display = “none”;隐藏轮播图容器，以避免在图片加载时出现闪烁或布局混乱、减少页面重排次数。
carouselDom.style.display = "none";
遍历图片列表并创建图片元素
- 使用 imgList.forEach((i, index) => { … }); 遍历图片列表。
- 在每次迭代中，创建一个 img元素，并设置其 class 为 carousel-item 和 src 为当前图片的 URL。
- 将创建的 img 元素添加到轮播图的DOM 元素 carouselDom 中。
imgList.forEach((i, index) => {
let img = document.createElement("img");
img.setAttribute("class", `carousel-item`); // 设置类名
img.setAttribute("src", i); // 设置图片源
carouselDom.appendChild(img); // 将图片添加到轮播图中
});
显示轮播图容器
- 在所有图片元素都被添加到轮播图后，通过 carouselDom.style.display = “flex”; 显示轮播图容器。
carouselDom.style.display = "flex";
定义并添加关键帧动画
- 调用 addKeyframeAnimation(imgList.length, deg); 函数，传入图片数量和每张图片的旋转角度。
- 在 addKeyframeAnimation 函数内部
- 创建一个 style 元素，并设置其 type 为 text/css。
- 计算每个关键帧的百分比 quotient，即 100 / length。
- 初始化一个空字符串 keyframeCSS，用于存储生成的 CSS。
- 遍历图片数量，为每个 .carousel-item 设置初始的 3D 变换，即 transform: rotateY(${(i - 1) * deg}deg) translateZ(150px);。
- 定义关键帧动画 rotateCarousel，并在每个百分比点上设置轮播图的旋转角度，即 transform: rotateY(${deg * i}deg) rotateX(0deg);。
- 将生成的 CSS 添加到 style元素中，然后将 style 元素添加到文档的 head 中。
// 定义函数，用于创建并添加包含关键帧动画的<style>元素
function addKeyframeAnimation(length, deg) {
const style = document.createElement('style'); // 创建一个<style>元素
style.type = 'text/css'; // 设置样式表类型
const quotient = 100 / length; // 计算每个关键帧的百分比
let keyframeCSS = ``; // 初始化CSS字符串
// 为每个.carousel-item元素设置初始的3D变换
for (let i = 1; i <= length; i++) {
keyframeCSS += `
.carousel-item:nth-child(${i}) {
transform: rotateY(${(i - 1) * deg}deg) translateZ(150px);
}
`;
}
// 定义关键帧动画rotateCarousel
keyframeCSS += `
@keyframes rotateCarousel {
`;
for (let i = 0; i <= length; i++) {
// 为每个百分比点设置轮播图的旋转角度
keyframeCSS += `
${(i * quotient).toFixed(2)}% {
transform: rotateY(${deg * i}deg) rotateX(0deg);
}
`;
}
keyframeCSS += `}`;
// 将CSS添加到<style>元素中
if (style.styleSheet) {
// 对于IE浏览器
style.styleSheet.cssText = keyframeCSS;
} else {
// 对于其他浏览器
style.appendChild(document.createTextNode(keyframeCSS));
}
// 将<style>元素添加到文档的<head>中
document.head.appendChild(style);
}
完成
- 此时，3D 轮播图已经成功创建，并应用了无限循环的动画效果。用户将看到一个不断旋转的 3D 图片轮播。
最后源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 设置文档的字符编码为UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 使页面在移动设备上具有适当的视口和缩放 -->
<title>3D Carousel</title> <!-- 页面标题 -->
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 使内容垂直居中，并设置高度为视口高度 */
background-color: #f0f0f0; /* 背景颜色 */
overflow: hidden; /* 隐藏滚动条，防止页面滚动 */
}
.carousel-container {
perspective: 1000px; /* 设置3D视角距离 */
width: 300px;
height: 300px;
border-radius: 10px; /* 圆角边框 */
position: relative; /* 相对定位，为子元素提供绝对定位的参考 */
transform-style: preserve-3d; /* 保持子元素的3D变换 */
}
.carousel {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d; /* 保持3D变换 */
transform: rotateY(0deg) rotateX(0deg); /* 初始旋转角度 */
transition: transform 0.2s ease-out; /* 平滑过渡效果 */
animation: rotateCarousel 10s infinite; /* 应用无限循环的动画 */
}
.carousel-item {
width: 100px;
height: 100px;
background-color: #3498db; /* 默认背景颜色 */
color: white; /* 文本颜色 */
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px; /* 圆角边框 */
margin: 0 20px; /* 调整边距以适应六个项目的布局 */
position: absolute; /* 绝对定位 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
pointer-events: none; /* 禁止鼠标事件 */
}
</style>
</head>
<body>
<div class="carousel-container"> <!-- 3D轮播图的容器 -->
<div class="carousel"> <!-- 轮播图的核心元素，包含所有的图片 -->
</div>
</div>
<script>
// 定义函数，用于创建并添加包含关键帧动画的<style>元素
function addKeyframeAnimation(length, deg) {
const style = document.createElement('style'); // 创建一个<style>元素
style.type = 'text/css'; // 设置样式表类型
const quotient = 100 / length; // 计算每个关键帧的百分比
let keyframeCSS = ``; // 初始化CSS字符串
// 为每个.carousel-item元素设置初始的3D变换
for (let i = 1; i <= length; i++) {
keyframeCSS += `
.carousel-item:nth-child(${i}) {
transform: rotateY(${(i - 1) * deg}deg) translateZ(150px);
}
`;
}
// 定义关键帧动画rotateCarousel
keyframeCSS += `
@keyframes rotateCarousel {
`;
for (let i = 0; i <= length; i++) {
// 为每个百分比点设置轮播图的旋转角度
keyframeCSS += `
${(i * quotient).toFixed(2)}% {
transform: rotateY(${deg * i}deg) rotateX(0deg);
}
`;
}
keyframeCSS += `}`;
// 将CSS添加到<style>元素中
if (style.styleSheet) {
// 对于IE浏览器
style.styleSheet.cssText = keyframeCSS;
} else {
// 对于其他浏览器
style.appendChild(document.createTextNode(keyframeCSS));
}
// 将<style>元素添加到文档的<head>中
document.head.appendChild(style);
}
// 图片列表（注意：这里的URL是不完整的，应补充完整的URL）
let imgList = [
"https://aaa.com/it/u=2961459243,2146986594&fm=193&f=GIF", // 示例图片URL（需补全）
// 其他图片的URL（需补全）...
];
// 计算每个图片应旋转的角度（360度除以图片数量）
let deg = 360 / imgList.length;
// 获取轮播图的DOM元素
let carouselDom = document.getElementsByClassName("carousel")[0];
// 隐藏轮播图容器，以便在添加图片后显示
carouselDom.style.display = "none";
// 遍历图片列表，为每个图片创建一个<img>元素，并添加到轮播图中
imgList.forEach((i, index) => {
let img = document.createElement("img");
img.setAttribute("class", `carousel-item`); // 设置类名
img.setAttribute("src", i); // 设置图片源
carouselDom.appendChild(img); // 将图片添加到轮播图中
});
// 显示轮播图容器
carouselDom.style.display = "flex";
// 调用函数添加关键帧动画
addKeyframeAnimation(imgList.length, deg);
</script>
</body>
</html>