使用HTML5+CSS3+JS实现3D轮播图,绝对的干货!
代码里面有相应的注释和介绍,所以话不多说,直接展示代码!
效果图:
HTML部分:
<div class="box">
<!-- 图片部分 -->
<ul>
<li class="current"><a href="#"><img src="images/1.png" alt=""></a></li>
<li class="next"><a href="#"><img src="images/2.png" alt=""></a></li>
<li class="prev"><a href="#"><img src="images/3.png" alt=""></a></li>
</ul>
<!-- 图片部分 end -->
<a href="javascript:void(0)" class="prevBtn">
<img src="images/left.png">
</a>
<a href="javascript:void(0)" class="nextBtn">
<img src="images/right.png">
</a>
</div>
CSS部分:
*{
padding: 0;
margin: 0;
}
ul,li,ol{
list-style: none;
}
a{
text-decoration: none;
}
.box{
width: 1200px;
height: 700px;
margin-right: auto;
margin-left: auto;
position: relative;
perspective: 500px; /* 3D虚拟视点距屏幕的距离 */
/* background-color: purple; */
}
.box ul img{
width: 627px;
height: 375px;
}
.box>ul>li>a{
display: block;
}
.box>ul>li{
position: absolute;
z-index: 1; /* 堆叠顺序 */
transform: scale(0.7,0.7);
transition:all 0.5s; /* 过度属性 很重要 */
top: 140px; /* 后面这两个属性也非常重要:*/
left: 280px; /* 让图片原始位置居中 */
}
/* 当前图片 */
.box>ul>li.current{
margin-left: 13px;
transform:scale(1,1);
z-index: 100;
}
/* 下一张图片 */
.box>ul>li.next{
right: 0;
margin-left: 300px;
transform:scale(0.7,0.7) rotateY(-10deg);
z-index: 50;
}
/* 上一张图片 */
.box>ul>li.prev{
left: 0;
margin-left: -6px;
transform:scale(0.7,0.7) rotateY(10deg);
z-index: 50;
}
/* 按钮 */
.prevBtn,.nextBtn{
display: block;
width: 50px;
height: 90px;
position: absolute;
background-color: red;
opacity: 0.5;
top: 40%;
transition: all 0.5s;
z-index: 200;
}
.prevBtn{
left:0;
}
.nextBtn{
right:0;
}
/* 按钮的hover 效果*/
.prevBtn:hover ,.nextBtn:hover{
opacity: 1;
}
JavaScript部分:
let lis = document.querySelectorAll("ul > li");
let prevBtn = document.querySelector(".prevBtn");
let nextBtn = document.querySelector(".nextBtn");
let index = 0;
function showPic(n){
let prevli,nextli;
if(n === lis.length-1){
nextli = 0;
}else{
nextli = n + 1;
}
if(n === 0){
prevli = lis.length-1;
}else{
prevli = n - 1;
}
for(let i = 0; i <= lis.length-1; i++){
lis[i].className = "";
}
lis[n].className = "current";
lis[nextli].className = "next";
lis[prevli].className = "prev";
}
showPic(index);//初始化
nextBtn.addEventListener("click",function(){
index--;
if(index < 0){
index = lis.length-1;
}
showPic(index);
});
prevBtn.addEventListener("click",function(){
index++;
if(index > lis.length-1){
index = 0;
}
showPic(index);
})
//自动切换
setInterval(function(){
index--;
if(index < 0){
index = lis.length-1;
}
showPic(index);
},5000);
学会了记得点赞哦!