微客导航 » 文章资讯 » JS+CSS实现3D切割轮播图

JS+CSS实现3D切割轮播图

2023-07-28 07:09:10 324

本文实例为大家分享了JS+CSS实现3D切割轮播图的具体代码，供大家参考，具体内容如下

第一步：我们首先要通过CSS来完成一个基本布局，利用transform-style:preserve-3d设置成3D。

下面是CSS部分的代码

*{
margin:0;
padding:0;
box-sizing:border-box;
}
li{
list-style:none;
}
/*轮播图*/
.homePage{
width:800px;
height:200px;
margin:150pxauto;
background-color:pink;
position:relative;
/*overflow:hidden;*/
}

.homePage>ul{
width:100%;
height:100%;
}

.homePage>ul>li{
width:200px;
height:100%;
float:left;
transform-style:preserve-3d;
position:relative;
transition:all1s;
}

.homePage>ul>li>span{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

.homePage>ul>li>span:nth-child(1){
background-image:url(../images/bxqy.jpg);
transform:translateZ(100px);
}
.homePage>ul>li>span:nth-child(2){
background-image:url(../images/fczlm.jpg);
transform:rotateX(90deg)translateZ(100px);
}
.homePage>ul>li>span:nth-child(3){
background-image:url(../images/hfh.jpg);
transform:rotateX(180deg)translateZ(100px);
}
.homePage>ul>li>span:nth-child(4){
background-image:url(../images/ss.jpg);
transform:rotateX(270deg)translateZ(100px);
}

/*图片的定位*/
.homePage>ul>li:nth-child(2)span{
background-position:-200px0;
}
.homePage>ul>li:nth-child(3)span{
background-position:-400px0;
}
.homePage>ul>li:nth-child(4)span{
background-position:-600px0;
}

/*小按钮*/
a{
position:absolute;
width:30px;
height:70px;
background-color:rgba(0,0,0,.2);
text-decoration:none;
color:#fff;
top:50%;
margin-top:-35px;
line-height:70px;
text-align:center;
display:none;
}
.right{
right:0;
}

第二步：我们利用JS来调整图片运动时的切割速度以及方向。

下面是js的代码。

$(function(){
varindex=0;
varflag=true;
vartime=setInterval(move,700);

//下一张
functionmove(){
if(!flag)return;
flag=false;
index++;
$(".homePage>ul>li").css("transform","rotateX("+(-90*index)+"deg)").each(function(index,item){
$(item).css("transition-delay",index*0.2+"s");
});
}

//移入移出
$(".homePage").mouseenter(function(){
clearInterval(time);
$(".homePage>a").css("display","block");
})
$(".homePage").mouseleave(function(){
time=setInterval(move,700);
$(".homePage>a").css("display","none");
})

//点击左边按钮：上一张
$(".left").on("click",function(){
if(!flag)return;
flag=false;
index--;
$(".homePage>ul>li").css("transform","rotateX("+(-90*index)+"deg)").each(function(index,item){
$(item).css("transition-delay",index*0.2+"s");
});
})

//点击有面按钮：下一张
$(".right").click(move);

//动画整个过渡结束之后，transitionend过渡完成时触发
$("li:last").on("transitionend",function(){
flag=true;
})
})

最后：body区域代码如下

<
>

注意：要利用overflow:hidden;来隐藏切割时超出的部分。最后3D切割轮播图就完成了。

精彩专题分享：jQuery图片轮播JavaScript图片轮播Bootstrap图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

JS+CSS实现3D切割轮播图

热门推荐

随机推荐