CSS3+JavaScript实现翻页幻灯片效果

时间：2021-05-26

先上效果图

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #content{ width: 500px; height: 300px; margin: 40px auto; position: relative; transform-style: preserve-3d; } #content>div{ width: 100%; height: 100%; position: absolute; transform-origin: center bottom; } #content img{ width: 100%; height: 100%; } #next{ position: absolute; top:190px; left: calc(33% - 60px); } #prev{ position: absolute; top: 190px; left: calc(68% + 30px); } @keyframes next{ //创建一个动画这是一个翻到下面的效果 from{ -wbelit-transform: perspective(1000px) rotateX(0deg); opacity: 1; //初始透明为1 } to{ -webkit-transform: perspective(1000px) rotateX(-180deg); opacity: 0; //结束透明为0 } } @keyframes prev{ //创建一个由上边翻到上边的动画 0%{ -webkit-transform: perspective(1000px) rotateX(180deg); opacity:0; //初始为透明 } 57% { -webkit-transform: perspective(1000px) rotateX(-16deg); opacity:1; //透明已经为1 了 } 66% { -webkit-transform: perspective(1000px) rotateX(14deg); } 74% { -webkit-transform: perspective(1000px) rotateX(-12deg); } 81% { -webkit-transform: perspective(1000px) rotateX(10deg); } 87% { -webkit-transform: perspective(1000px) rotateX(-8deg); } 92% { -webkit-transform: perspective(1000px) rotateX(6deg); } 96% { -webkit-transform: perspective(1000px) rotateX(-4deg); } 100% { -webkit-transform: perspective(1000px) rotateX(0deg); }<br>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 } .next{ animation: next 1s ease 1 normal 0s; transform: rotateX(-180deg); opacity: 0; } .prev{ animation: prev 1.2s ease 1 normal 0s; transform: rotateX(0deg); opacity: 1; } </style> </head> <body> <button id="next">←</button><button id="prev">→</button> <div id="content"> <div class="prev"><img src="images/012.jpeg"></div> <!-- 设置默认的第一页 --> <div class="next"><img src="images/017.jpeg"></div> <div class="next"><img src="images/020.jpeg"></div> <div class="next"><img src="images/027.jpeg"></div> <div class="next"><img src="images/0df3d7ca7bcb0a46ce09bc1e6e63f6246b60afe9.jpg"></div> </div> <script> window.onload=function(){ var next=document.getElementById("next"); var prev=document.getElementById("prev"); var content=document.getElementById("content"); var oDiv=content.getElementsByTagName("div"); var x=0; next.onclick=function(){ //当向下翻页时 oDiv[x].setAttribute("class","next"); //第一个页 设置class名让他向下走去 x++ if(x>oDiv.length-1){ x=0 } oDiv[x].setAttribute("class","prev"); //++过后让他的下一个页面起来 } prev.onclick=function(){ //同上只是++变-- oDiv[x].setAttribute("class","next"); x-- if(x<0){ x=oDiv.length-1 } oDiv[x].setAttribute("class","prev"); } } </script> </body></html>

以上所述是小编给大家介绍的CSS3+JavaScript实现翻页幻灯片效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章