3D切割輪播圖(H5C3)
阿新 • • 發佈:2018-12-06
效果
頁面結構
<div class="box">
<ul class="imageBox">
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span ></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span> </span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></ span>
<span></span>
<span></span>
</li>
</ul>
<!-- 轉義符 \ 實體 < -->
<a class="left" href="javascript:;"><</a>
<a class="right" href="javascript:;">></a>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
.box {
width: 560px;
height: 300px;
margin: 100px auto 0;
border: 1px solid #ccc;
position: relative;
}
.box .imageBox {
list-style: none;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.box .imageBox li {
width: 112px;
height: 100%;
float: left;
position: relative;
/*3d呈現*/
transform-style: preserve-3d;
/*加過渡*/
transition:all 1s ease;
}
.box .imageBox li span{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("images/1.jpg") no-repeat;
}
/*拼接立體容器*/
/*1.立體容器旋轉中心要在電腦平面上*/
/*2.立體容器每一個面的圖片正面朝外*/
.box .imageBox li span:nth-child(1){
background-image: url("images/1.jpg");
transform: translateZ(150px);
}
.box .imageBox li span:nth-child(2){
background-image: url("images/2.jpg");
/*旋轉過後軸也會旋轉::::::*/
transform: rotateX(90deg) translateZ(150px);
}
.box .imageBox li span:nth-child(3){
background-image: url("images/3.jpg");
transform: rotateX(180deg) translateZ(150px);
}
.box .imageBox li span:nth-child(4){
background-image: url("images/4.jpg");
transform: rotateX(270deg) translateZ(150px);
}
/*拼接背景*/
.box .imageBox li:nth-child(1) span{
background-position: 0 0;
}
.box .imageBox li:nth-child(2) span{
background-position: -112px 0;
}
.box .imageBox li:nth-child(3) span{
background-position: -224px 0;
}
.box .imageBox li:nth-child(4) span{
background-position: -336px 0;
}
.box .imageBox li:nth-child(5) span{
background-position: -448px 0;
}
.box .left,
.box .right{
position: absolute;
width: 50px;
height: 70px;
background: rgba(0,0,0,.2);
top:115px;
text-align: center;
line-height: 70px;
font-size: 20px;
color: #fff;
text-decoration: none;
font-weight: bold;
}
.box .right{
right: 0;
}
注:
-如果不需要切割的效果,只要3D轉換的效果把each去掉
jQuery
$(function () {
//定義一個索引
var index=0;
var flag=true;
$('.left').on('click',function () {
if (!flag) return false; //節流閥
flag=false;
index --;
console.log(index);
let angle= - index*90;
$('.imageBox>li').css('transform','rotateX('+angle+'deg)').each(function (i,item) {
//設定不同的延時
$(this).css('transition-delay',i*0.25+'s');
});
});
// 3.點選右邊按鈕下一張
$('.right').on('click',function () {
if (!flag) return false; //節流閥
flag=false;
index ++;
console.log(index);
let angle= - index*90;
$('.imageBox>li').css('transform','rotateX('+angle+'deg)').each(function (i,item) {
//設定不同的延時
$(this).css('transition-delay',i*0.25+'s');
});
/*4.優化 重複點選的時候動畫會層疊的執行 節流閥 */
});
$('.imageBox>li:last').on('transitionend',function () {//監聽最後一個li 的過渡結束
flag=true;
});
});