溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了javascript實現切割輪播的具體代碼，供大家參考，具體內容如下
效果
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<style>
.container{
position: relative;
width: 560px;
height: 300px;
}
.container ul{
/*transform-style:preserve-3d;*/
/*transform: rotateX(-30deg) rotateY(21deg);*/
width: 560px;
height: 300px;
border:2px solid red;
list-style-type: none;
margin:0;
padding:0;
}
.container ul li{
position: relative;
float: left;
/*一張圖分作5片，圖的總寬度是560*/
width: 112px;
height: 300px;
transform-style:preserve-3d;
transition:all 0.5s;
}
.container ul li span{
position: absolute;
left:0;
top:0;
width: 100%;
height: 100%
}
/*以下4個選擇器設定立體效果*/
.container ul li span:nth-child(1){
background: yellow;
transform:translateZ(150px);
}
.container ul li span:nth-child(2){
background: pink;
transform:translateY(-150px) rotateX(90deg);
}
.container ul li span:nth-child(3){
background: orange;
transform:translateZ(-150px) rotateX(180deg);
}
.container ul li span:nth-child(4){
background: blue;
transform:translateY(150px) rotateX(270deg);
}
/*//以下4個選擇器設定第n個span的背景圖*/
.container ul li span:nth-child(1){
background: url(images/1.jpg);
}
.container ul li span:nth-child(2){
background: url(images/2.jpg);
}
.container ul li span:nth-child(3){
background: url(images/3.jpg);
}
.container ul li span:nth-child(4){
background: url(images/4.jpg);
}
/*以下5個選擇器用于設定第i個li的背景定位*/
.container ul li:nth-child(1) span{
background-position: 0px 0px;
}
.container ul li:nth-child(2) span{
background-position: -112px 0px;
}
.container ul li:nth-child(3) span{
background-position: -224px 0px;
}
.container ul li:nth-child(4) span{
background-position: -336px 0px;
}
.container ul li:nth-child(5) span{
background-position: -448px 0px;
}
/*.container ul li:nth-child(1) span:nth-child(1){
background: url(images/1.jpg) 0px 0px;
}
.container ul li:nth-child(2) span:nth-child(1){
background: url(images/1.jpg) -112px 0px;
}
.container ul li:nth-child(3) span:nth-child(1){
background: url(images/1.jpg) -224px 0px;
}
.container ul li:nth-child(4) span:nth-child(1){
background: url(images/1.jpg) -336px 0px;
}
.container ul li:nth-child(5) span:nth-child(1){
background: url(images/1.jpg) -448px 0px;
}
.container ul li:nth-child(1) span:nth-child(2){
background: url(images/2.jpg) 0px 0px;
}
.container ul li:nth-child(2) span:nth-child(2){
background: url(images/2.jpg) -112px 0px;
}*/
.container span.left, .container span.right{
position: absolute;
top:50%;
background: rgba(0,0,0,0.3);
width: 18px;
height: 40px;
font-size:25px;
font-weight: bold;
color:white;
text-align: center;
line-height: 40px;
cursor:pointer;
}
.container span.left{
left:0;
}
.container span.right{
right:0;
}
</style>
</head>
<body>
<div class="container">
<ul>
<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>
<span class="left"><</span>
<span class="right">></span>
</div>
</body>
</html>
<script>
$(function(){
var allowClick = true;
var seq = 0; //代表初始的轉動角度次數
//先給這5個li的動畫效果設置不同的延時（delay)
//index表示循環中的索引號，item表示當前項（這里是li）
$("ul>li").each( function(index,item){
var delay_time = index*0.25;
$(item).css({"transition-delay": delay_time + "s"});
} );
//transitionend事件：動畫結束事件
$("ul>li:last-child").on('transitionend',function(){
allowClick = true; //允許點擊
});
//
$("span.left").on('click',function(){
//如果allowClick為false，表示此時還不允許點擊，就直接退出
if(allowClick == false){ return ;}
allowClick = false; //如果可以繼續下去，此時就會去執行動畫，則此刻
//就必須講這個allowClick設定為false
seq--;
var angle = -seq*90;
$("ul>li").css({"transform":"rotateX(" + angle + "deg)"});
});
$("span.right").on('click',function(){
//如果allowClick為false，表示此時還不允許點擊，就直接退出
if(allowClick == false){ return ;}
allowClick = false;
seq++;
var angle = -seq*90;
$("ul>li").css({"transform":"rotateX(" + angle + "deg)"});
});
});
</script>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
