<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图-不用jquery</title> <style> *{ padding:0; margin:0; } .view{ width: 1000px; height: 600px; margin: 0px auto; margin-top:30px; position: relative; } .view > ul{ list-style: none; width: 100%; height: 100%; transform: rotate3d(1,1,0,0deg); transform-style: preserve-3d; } .view > ul > li{ width: 20%; float: left; height: 100%; position: relative; transform-style: preserve-3d; transition: transform ; transition-duration: 0.5s; } .view > ul > li > span{ display: block; width: 100%; height: 100%; position: absolute; left: 0; top:0; } .view > ul > li > span:nth-of-type(1){ background: url("./img/img1.jpg"); transform: translateZ(300px); } .view > ul > li > span:nth-of-type(2){ background: url("./img/img2.jpg"); transform: translateY(-300px) rotate3d(1,0,0,90deg); } .view > ul > li > span:nth-of-type(3){ background: url("./img/img3.jpg"); transform: translateZ(-300px) rotate3d(1,0,0,180deg); } .view > ul > li > span:nth-of-type(4){ background: url("./img/img4.jpg"); transform: translateY(300px) rotate3d(1,0,0,-90deg); } .view > ul > li:nth-of-type(1) > span{ background-position: 0,0; } .view > ul > li:nth-of-type(2) > span{ background-position: -100%,0; } .view > ul > li:nth-of-type(3) > span{ background-position: -200%,0; } .view > ul > li:nth-of-type(4) > span{ background-position: -300%,0; } .view > ul > li:nth-of-type(5) > span{ background-position: -400%,0; } .view > .button > a{ position: absolute; top:50%; transform: translateY(-50%); display: block; background: rgba(0,0,0,0.5); height: 50px; line-height: 50px; text-decoration: none; text-align: center; width: 50px; color: #fff; font-size: 30px; } .view > .button > a.pre{ left:5px; } .view > .button > a.next{ right:5px; } </style> </head> <body> <div class="view"> <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> <div class="button"> <a href="javascript:void(0)" class="pre"><</a> <a href="javascript:void(0)" class="next">></a> </div> </div> <script> window.onload = function(){ let count = 0 //点击次数,根据这个变化点击角度 let flag = true //防止多次点击 document.querySelector('.next').onclick = function(){ //点击下一页 if(flag){ flag = false count++ var li = document.querySelectorAll('li') li.forEach(function(value,key,arr){ value.style.transform = `rotate3d(1,0,0,-${count*90}deg)` value.style['transition-delay'] = key * 0.1 + 's' }) setTimeout(function(){ flag = true },800) } } document.querySelector('.pre').onclick = function(){ //点击上一页 if(flag){ flag = false count-- var li = document.querySelectorAll('li') li.forEach(function(value,key,arr){ value.style.transform = `rotate3d(1,0,0,-${count*90}deg)` value.style['transition-delay'] = key * 0.1 + 's' }) setTimeout(function(){ flag = true },800) } } } </script> </body> </html>
来源:https://www.cnblogs.com/bluecaterpillar/p/11652253.html