(编辑:jimmy 日期: 2024/10/30 浏览:2)
实现思路
btn1.onclick = ()=>{ item++; let r = item * 90; letf.style.transform = 'rotateX(' + r + 'deg)'; letf.style.transition = 'all 1s'; right.style.transform = 'rotateX(' + r + 'deg)'; right.style.transition = 'all 1s .3s'; } btn2.onclick = ()=>{ item--; let r = item * 90; letf.style.transform = 'rotateX(' + r + 'deg)'; letf.style.transition = 'all 1s'; right.style.transform = 'rotateX(' + r + 'deg)'; right.style.transition = 'all 1s .3s'; }
最后附上全部代码,希望对学习前端的你有所帮助
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>切割轮播图</title> </head> <body> <div class="box"> <ul class="letf"> <li></li> <li></li> <li></li> <li></li> </ul> <ul class="right"> <li></li> <li></li> <li></li> <li></li> </ul> </div> <button id="btn1">上一页</button><button id="btn2">下一页</button> </body> </html>
css 代码
*{ margin: 0; padding: 0; } body{ perspective: 800px; } .box{ display: flex; width: 600px; height: 350px; margin: 150px auto; } .box:hover ul li:nth-child(1){ transition: all 5s; transform: rotateX(360deg); } ul{ flex: 1; list-style: none; padding: 0; margin: 0; transform-style: preserve-3d; /* 开启浏览器的3D显示 */ position: relative; } li{ width: 100%; height: 100%; position: absolute; } li:nth-child(1){ background: url('../images/9.jpg') no-repeat; background-size: 200% 100%; transform: translateZ(175px); } li:nth-child(2){ background: url('../images/10.jpg') no-repeat; background-size: 200% 100%; transform: rotateX(90deg) translateZ(175px); } li:nth-child(3){ background: url('../images/11.jpg') no-repeat; background-size: 200% 100%; transform: rotateX(180deg) translateZ(175px); } li:nth-child(4){ background: url('../images/12.jpg') no-repeat; background-size: 200% 100%; transform: rotateX(-90deg) translateZ(175px); } .right li{ background-position-x: -300px; }
js代码
let item = 0; let btn1 = document.getElementById('btn1'); let btn2 = document.getElementById('btn2'); let letf = document.querySelector('.letf'); let right = document.querySelector('.right') btn1.onclick = ()=>{ item++; let r = item * 90; letf.style.transform = 'rotateX(' + r + 'deg)'; letf.style.transition = 'all 1s'; right.style.transform = 'rotateX(' + r + 'deg)'; right.style.transition = 'all 1s .3s'; } btn2.onclick = ()=>{ item--; let r = item * 90; letf.style.transform = 'rotateX(' + r + 'deg)'; letf.style.transition = 'all 1s'; right.style.transform = 'rotateX(' + r + 'deg)'; right.style.transition = 'all 1s .3s'; }