<!DOCTYPE html> <html> <head> <title></title> <script src="jquery-1.8.2.min.js" type="text/javascript"></script> <style> .main{width:1020px; margin:0 auto;} .slide-wrap { width:480px; height:346px; position:relative; margin:50px auto; padding:0px; list-style:none; transform-style:preserve-3d;/*让子元素继承3d效果*/ -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -o-transform-style:preserve-3d; -ms-transform-style:preserve-3d; perspective:1000px; -webkit-perspective:1000px;/*视图距离*/ -moz-perspective:1000px; -ms-perspective:1000px; -o-perspective:1000px; } .slide-wrap li { width:480px; height:346px; position:absolute; top:0px; left:0px;box-shadow:0 10px 20px rgba(0,0,0,.1); font-size:0;-webkit-transition:all .5s ease-in-out; -moz-transition:all .5s ease-in-out; -ms-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; transition:all .5s ease-in-out; z-index:2; } .slide-wrap li a {width:480px; height:346px; position:relative;} .slide-wrap li a div { width:400px; height:50px; position:absolute; bottom:0px; left:40px; background: #CBBFAE; background: rgba(190,176,155, 0.4); border-left: 4px solid white; border-left: 4px solid rgba(255,255,255,0.7); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity:0.5; color: black; z-index:9999; } .slide-wrap li a div:hover{ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); background: rgba(190,176,155, 0.8); } .slide-wrap li a img{width:478px; height:344px; border:1px solid gray;} .leftClass { transform:translateX(-350px) translateZ(-200px) rotateY(45deg); -webkit-transform:translateX(-350px) translateZ(-200px) rotateY(45deg); -moz-transform:translateX(-350px) translateZ(-200px) rotateY(45deg); -o-transform:translateX(-350px) translateZ(-200px) rotateY(45deg); -ms-transform:translateX(-350px) translateZ(-200px) rotateY(45deg); opacity:1; visibility:visible; } .rightClass { transform:translate3d(350px,0px,-200px) rotateY(-45deg); -webkit-transform:translate3d(350px,0px,-200px) rotateY(-45deg); -moz-transform:translate3d(350px,0px,-200px) rotateY(-45deg); -ms-transform:translate3d(350px,0px,-200px) rotateY(-45deg); -o-transform:translate3d(350px,0px,-200px) rotateY(-45deg); opacity:1; } .centerClass{ -webkit-transform:translateX(0px) translateZ(0px) rotateY(0deg); -moz-transform:translateX(0px) translateZ(0px) rotateY(0deg); -ms-transform:translateX(0px) translateZ(0px) rotateY(0deg); -o-transform:translateX(0px) translateZ(0px) rotateY(0deg); transform: translateX(0px) translateZ(0px) rotateY(0deg); opacity:1; visibility:visible; z-index:99; } .outleft{ -webkit-transform:translateX(-450px) translateZ(-300px) rotateY(45deg); -moz-transform:translateX(-450px) translateZ(-300px) rotateY(45deg); -ms-transform:translateX(-450px) translateZ(-300px) rotateY(45deg); -o-transform:translateX(-450px) translateZ(-300px) rotateY(45deg); transform: translateX(-450px) translateZ(-300px) rotateY(45deg); opacity:0; visibility:hidden; } .outright{ -webkit-transform:translateX(450px) translateZ(-300px) rotateY(-45deg); -moz-transform:translateX(450px) translateZ(-300px) rotateY(-45deg); -ms-transform:translateX(450px) translateZ(-300px) rotateY(-45deg); -o-transform:translateX(450px) translateZ(-300px) rotateY(-45deg); transform: translateX(450px) translateZ(-300px) rotateY(-45deg); opacity:0; visibility:hidden; } .btn{width:50px; height:30px; border:0px; background:yellow; cursor:pointer; font-weight:700; color:green; font-size:16px;} </style> </head> <body> <div class="main"> <ul class="slide-wrap"> <li class="outleft"> <a href=""> <img src="images/5.jpg" /> <div class="titleDescription">绿巨人1</div> </a> </li> <li class="leftClass"><a href=""><img src="images/1.jpg" /><div class="titleDescription">绿巨人2</div></a></li> <li class="centerClass"> <a href=""> <img src="images/2.jpg" /> <div class="titleDescription">绿巨人3</div> </a> </li> <li class="rightClass"><a href=""><img src="images/3.png" /><div class="titleDescription">绿巨人4</div></a></li> <li class="outright"><a href=""><img src="images/6.png" /><div class="titleDescription">绿巨人5</div></a></li> </ul> <div style=" text-align:center;"> <input type="button" value="prev" id="prev" class="btn"/> <input type="button" value="next" id="next" class="btn"/> </div> </div> <script> $(function () { $.fn.slide = function () { var slideWrap = $(this); var classArray = ["outleft", "leftClass", "centerClass", "rightClass", "outright"]; var prevBtn = $("#prev"); var nextBtn = $("#next"); var move = function (dir) { if (dir == "next") { slideWrap.children("li:first").appendTo(slideWrap); } if (dir == "prev") { slideWrap.children("li:last").prependTo(slideWrap); } slideWrap.children("li").each(function (i) { $(this).attr("class", classArray[i]); }); }; var autoPlay = function (dir) { move(dir); }; var init = function () { var t = setInterval(function () { autoPlay("next"); }, 3000); }; nextBtn.click(function () { move("next"); }); prevBtn.click(function () { move("prev"); }); init(); // move("next"); }; $(".slide-wrap").slide(); }); </script> </body> </html>
效果图：
有点问题就是透明层里面的文字没有显示出来，待完善。
ps:此文仿照的是别人的demo，纯学习