您好,登錄后才能下訂單哦!
本文實(shí)例為大家分享了javascript實(shí)現(xiàn)切割輪播的具體代碼,供大家參考,具體內(nèi)容如下
效果
代碼
<!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個(gè)選擇器設(shè)定立體效果*/ .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個(gè)選擇器設(shè)定第n個(gè)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個(gè)選擇器用于設(shè)定第i個(gè)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; //代表初始的轉(zhuǎn)動(dòng)角度次數(shù) //先給這5個(gè)li的動(dòng)畫效果設(shè)置不同的延時(shí)(delay) //index表示循環(huán)中的索引號(hào),item表示當(dāng)前項(xiàng)(這里是li) $("ul>li").each( function(index,item){ var delay_time = index*0.25; $(item).css({"transition-delay": delay_time + "s"}); } ); //transitionend事件:動(dòng)畫結(jié)束事件 $("ul>li:last-child").on('transitionend',function(){ allowClick = true; //允許點(diǎn)擊 }); // $("span.left").on('click',function(){ //如果allowClick為false,表示此時(shí)還不允許點(diǎn)擊,就直接退出 if(allowClick == false){ return ;} allowClick = false; //如果可以繼續(xù)下去,此時(shí)就會(huì)去執(zhí)行動(dòng)畫,則此刻 //就必須講這個(gè)allowClick設(shè)定為false seq--; var angle = -seq*90; $("ul>li").css({"transform":"rotateX(" + angle + "deg)"}); }); $("span.right").on('click',function(){ //如果allowClick為false,表示此時(shí)還不允許點(diǎn)擊,就直接退出 if(allowClick == false){ return ;} allowClick = false; seq++; var angle = -seq*90; $("ul>li").css({"transform":"rotateX(" + angle + "deg)"}); }); }); </script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。