以下說明數據，是指有4張圖片的輪播圖，分別切割成4張。

首先，做成單張切換的立體效果，即通過旋轉，確定四張圖片的位置，分別是一個立方體的上下前后的圖片翻轉移動角度。

.box ul li:nth-child(1){transform:rotateX(90deg) translateZ(190px);}.box ul li:nth-child(2){transform:rotateX(-90deg) translateZ(190px);}.box ul li:nth-child(3){transform:translateZ(190px);}.box ul li:nth-child(4){transform:rotateX(180deg) translateZ(190px);}

　　

其次，切割輪播圖的原理并不是將一個圖片切割成4張，而是通過flex伸縮布局調整4張圖片的位置，并調整圖片位置，使得看起來像一張圖片，通過設置過渡延遲來實現切割效果。

.box {width: 560px;height: 380px;border: 1px solid #000;margin: 100px auto 0;/* 讓這個盒子成為一個伸縮容器 一旦盒子成為了伸縮容器，里面所有的子元素都會自動成為項目 項目默認呈現水平排列 一旦水平排列就會超出box，所以，flex-shrink：1自動就會收縮每一個UL，最終的結果就是一個UL占的box的1/4*/display: flex;}.box ul {width: 560px;height: 380px;position: relative;transform-style:preserve-3d;transform:rotateX(0deg);transition:transform 1s;}.box ul li {/* 這里的LI設置成百分之百分寬高，為的是繼承縮放后的UL的寬度 */width: 100%;height: 100%;position: absolute;left: 0;top: 0;/* 在這里添加overflow：hidden */overflow: hidden;}/* 給每一個UL添加延遲時間 */.box ul:nth-child(2){transition-delay: 0.2s;}.box ul:nth-child(3){transition-delay: 0.4s;}.box ul:nth-child(4){transition-delay: 0.6s;}/* 讓每一個UL下面的圖片都往左走 */.box ul:nth-child(2) img{margin-left: -140px;}.box ul:nth-child(3) img{margin-left: -280px;}.box ul:nth-child(4) img{margin-left: -420px;}

　　最后，通過JS的遍歷來分別給每個按鈕、每個ul注冊事件，并通過添加 節流閥來控制輪播圖的進度

<script type="text/javascript">// 需求 ：點擊按鈕讓UL進行旋轉 每一次點擊累加一個90的角度//（１）找對象var box = document.querySelector('.box');var _ul = box.querySelectorAll('ul');var btns = document.querySelectorAll('button');// （2）給右邊的按鈕綁定點擊事件 每點擊一次讓Ul基于之前的角度在加上一個90var num = 0; // 模擬信號量// 設置一個flag變量var flag = true;// 整體綁定for(var i = 0; i < btns.length; i++){// 設置自定義屬性btns[i].setAttribute('data-index', i);btns[i].addEventListener('click',function(){if(flag){// 關門flag = false;// 判斷當前點擊的是哪一個對象// 通過this去拿到當前的那個對象的data-indexvar index = this.dataset['index'];// 不能用全等 因為一個是字符串一個是數值型if(index == 1){num++;}else if(index == 0){num--;}console.log(num*90);// _ul.style.transform = 'rotateX('+num*90+'deg)';// 讓所有的UL轉起來for(var i = 0; i < _ul.length; i++){_ul[i].style.transform = 'rotateX('+num*90+'deg)';}}})}// 當用戶暴力點擊的時候，會出現過渡來不及的BUG 解決方案：函數節流 // 當最后一個UL的過渡執行完畢之后重新開門_ul[_ul.length - 1].addEventListener('transitionend',function(){console.log(1);// 開門flag = true; 　　　　})

轉載于:https://www.cnblogs.com/tangting/p/6241891.html

總結

以上是生活随笔為你收集整理的CSS3+JS切割轮播图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。