<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style id="css"> *{ margin: 0; padding: 0; } li{ list-style-type: none; } .wrap{ width: 500px; height: 300px; margin: 50px auto; box-shadow: 0 0 120px #333; position: relative; } /*..................li style.................*/ .piclist{ width: 100%; height: 300px; /*caution*/ -webkit-perspective:800px; /*景深*/ overflow: hidden; } .piclist li{ height: 300px; position: relative; float: left; -webkit-transform-style:preserve-3d; -webkit-transform-origin:center center -150px; /*注意-150px*/ } .piclist li a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .piclist li a:nth-of-type(1){ background: url(a.jpg) no-repeat; } .piclist li a:nth-of-type(2){ background: url(b.jpg) no-repeat; top: -300px; -webkit-transform-origin:bottom; -webkit-transform:rotateX(90deg); /*-webkit-transform-origin:top; -webkit-transform:rotateX(-90deg);*/ } .piclist li a:nth-of-type(3){ background: url(c.jpg) no-repeat; -webkit-transform:translateZ(-300px) rotateX(180deg); /*翻转过来*/ } .piclist li a:nth-of-type(4){ background: url(d.jpg) no-repeat; top: 300px; -webkit-transform-origin:top; -webkit-transform:rotateX(-90deg); /*-webkit-transform-origin:bottom; -webkit-transform:rotateX(90deg);*/ } .piclist li span{ background-color: #333; position: absolute; top: 0; width: 300px; /*注意这里大小和a的大小是不一样的喔*/ height: 300px; } .piclist li span:nth-of-type(1){ left: 0; /*靠左*/ -webkit-transform-origin:left; -webkit-transform:rotateY(90deg); } .piclist li span:nth-of-type(2){ right: 0; /*靠右*/ -webkit-transform-origin:right; -webkit-transform:rotateY(-90deg); } /*......................btn sytle............*/ .btnlist{ position: absolute; right: 0; bottom: -50px; } .btnlist li{ float: left; width: 30px; height: 30px; text-align: center; background-color: gray; margin-right: 10px; border-radius: 50%; font: italic 16px/30px "Arial"; cursor: pointer; color: #fff; -webkit-user-select:none; } .btnlist .active{ background-color: orange; } </style> </head> <body> <div class="wrap"> <ul class="piclist" id="piclist"> <!-- <li> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <span></span> <span></span> </li> --> </ul> <ol class="btnlist" id="btnlist"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> </ol> </div> <script> var oPic=document.getElementById("piclist"); var aPicList=oPic.getElementsByTagName("li"); var oBtn=document.getElementById("btnlist"); var aBtnLi=oBtn.getElementsByTagName("li"); var oCss=document.getElementById("css"); var sCss=""; var oneW=100; //调整此li宽度或间隔时间来调整效果 var iNum=parseInt(oPic.clientWidth/oneW); var iZindex=0; var sPic=""; var arrZ=[]; for(var i=0;i<iNum;i++){ i>iNum/2?iZindex--:iZindex++; arrZ.push(iZindex); sPic+='<li><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><span></span><span></span></li>'; sCss+=".piclist li:nth-of-type("+(i+1)+"){z-index:"+iZindex+";}"; //z-index:iZindex(X)凡是(只有)变量都是"+var+"，此地外层用双引号 sCss+=".piclist li:nth-of-type("+(i+1)+") a{background-position:-"+oneW*i+"px 0;}"; } oPic.innerHTML=sPic; oCss.innerHTML+=sCss; //或者这样加z-index // for(var i=0;i<iNum;i++){ // aPicList[i].style.zIndex=arrZ[i]; //一定要在oPic.innerHTML=sPic;后设置z-index // } for(var i=0;i<aPicList.length;i++){ aPicList[i].style.width=oneW+"px"; } var iNow=0; for(var i=0;i<aBtnLi.length;i++){ (function(index){ aBtnLi[index].onclick=function(){ for(var i=0;i<aPicList.length;i++){ aPicList[i].style.WebkitTransition=".5s "+i*100+"ms"; aPicList[i].style.WebkitTransform="rotateX(-"+(index*90)+"deg)"; //index*90 } //console.log(index); aBtnLi[iNow].className=""; aBtnLi[index].className="active"; //注意这里aBtnLi[index] iNow=index; }; })(i); } </script> </body> </html>