CSS3+JS切割轮播图
以下说明数据,是指有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的角度 //(1)找对象 var box = document.querySelector('.box'); var _ul = box.querySelectorAll('ul'); var btns = document.querySelectorAll('button'); // (2)给右边的按钮绑定点击事件 每点击一次让Ul基于之前的角度在加上一个90 var 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-index var 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;
})
你还有很多未完成的梦,还有什么理由停下脚步