当涉及到实现3D轮播图效果时，JavaScript是一个非常强大且灵活的语言，它提供了丰富的功能和API来操作DOM元素、处理动画效果和响应用户交互。本文将向您展示如何使用JavaScript手写实现一个基本的3D轮播图效果。
在本文中，我们将使用以下步骤来创建3D轮播图：
-
创建HTML结构：首先，我们需要创建一个包含轮播图的容器，并在其中添加多个轮播项。每个轮播项都应该是一个带有图像和相关内容的HTML元素。
-
设置CSS样式：我们需要设置容器的样式，使其具有适当的宽度和高度，并将溢出设置为隐藏。此外，还可以设置每个轮播项的样式，包括位置、大小和透明度等属性。
-
编写JavaScript代码：我们将使用JavaScript来控制轮播图的动画效果和用户交互。主要的步骤包括：
- 获取DOM元素：使用JavaScript的
querySelector或getElementById方法获取容器和轮播项的DOM元素，并存储为变量。 - 设置初始状态：在开始动画之前，我们需要设置轮播项的初始位置和样式。可以使用
transform属性来设置轮播项的旋转、平移和缩放等效果。 - 添加事件监听器：为了实现用户交互，我们可以为轮播图容器添加事件监听器，例如鼠标左右箭头的点击事件等。
- 获取DOM元素：使用JavaScript的
在本文的示例代码中，我们将使用原生的JavaScript和CSS来实现3D轮播图效果，而不依赖于任何第三方库或框架。这将使您更好地理解3D轮播图的实现原理，以及如何利用JavaScript的强大功能来创建交互性和可定制性的动画效果。
通过手写实现3D轮播图效果，您将能够更好地理解JavaScript的DOM操作、动画处理和事件处理等核心概念。不仅如此，您还可以根据自己的需求和想法对轮播图进行定制和优化，以创建更出色的用户体验。
让我们开始手写实现3D轮播图效果的旅程吧！
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D轮播图效果</title>
<style>
body{
background-color: #000;
}
.container{
width: 600px;
height: 400px;
position: relative;
margin: 100px auto;
}
.container img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: 5px -5px 5px #fff;
object-fit: cover;
}
.prev ,.next {
position: absolute;
top: 50%;
width: 50px;
height: 35px;
transform: translate(0%,-50%);
background-color: orange;
cursor: pointer;
/* opacity: 0; */
z-index: 99;
transition: all 1s linear;
}
.prev {
left: -100px;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
.next {
right: -100px;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}
</style>
</head>
<body>
<div class="container">
<span class="prev"></span>
<span class="next"></span>
<img class="item" src="./img/1.jpg" alt="">
<img class="item" src="./img/2.jpg" alt="">
<img class="item" src="./img/3.jpg" alt="">
<img class="item" src="./img/4.jpg" alt="">
<img class="item" src="./img/5.jpg" alt="">
</div>
<script src="./js/index.js"></script>
</body>
</html>
// let container =document.querySelector(".container");
// console.log(container);
// container.addEventListener("click",function(e){
// console.log(e.target);
// })
let items = document.querySelectorAll(".item");
let prev = document.querySelector(".prev");
let next = document.querySelector(".next");
let index = 2; // 当前显示的是第几张图片
// 布局
function layout(){
const xOffsetStep = 100; // 每张轮播图之间的间隔
const count = items.length;
const scaleStep = .6; // 缩放比例
const opacityStep = .7; // 透明倍率
// console.log("layout");
for (let i = 0; i < items.length; i++) {
const sign = Math.sign(i - index);
const item = items[i];
const rotateY = i === index ? 0 : 45 *-sign;
let xOffset = (i - index) * xOffsetStep;
if (i !==index) {
xOffset = xOffset + 100*sign;
}
const scale = scaleStep ** Math.abs(i -index);
// transform
// opacity
// rotateY()
item.style.transform = `translateX(${xOffset}px) scale(${scale}) rotateY(${rotateY}deg)`
item.style.opacity = opacityStep ** Math.abs(i -index);
item.style.zIndex = count - Math.abs(index - i);
item.style.transition = `all .5s ease`;
}
}
layout();
// 上一张
prev.addEventListener("click", function() {
index--;
if(index <0) index =0;
layout();
})
// 下一张
next.addEventListener("click",function() {
index++;
if (index > items.length -1) {
index = items.length -1;
}
layout();
})
items.forEach((item, i) =>{
item.addEventListener("click",function() {
index = i;
layout();
})
})
