万千封印
唉~ 写了半天~ 累啊<!DOCTYPE html><html><head> <meta http-equiv="Cache-Control" content="no-transform " /> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1" /> <meta name="renderer" content="webkit" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>轮播图 | 杰凯寇赞</title> <style> html,body {height: 100%} html {background: #222;color:#fff;} body {margin: 0;font-family: Roboto,Helvetica,Arial,Microsoft JhengHei,sans-serif} .viewport {width: 944px;height:283px;position: relative;overflow: hidden;} .father {width:3000%;height:100%;padding: 20px 0;box-sizing: border-box;transition: transform 0.6s ease-in-out;transform: translate3d(0,0,0);background: #ff5252;} .father.moving {transition-duration: 0s;} .father > div {width: 432px;height: 243px;margin: 0 20px;opacity:0.6;transition: all 0.6s ease-in-out;background: #2dbe60;float: left;} .father.moving > div {transition-duration: 0s;} .father > div.showing {opacity: 1;transform: scale3d(1.1, 1.1, 1);} .left, .right {width: 30px;height: 100%;line-height: 283px;user-select:none;text-align: center;cursor: pointer;background: rgba(0,0,0,0.15);position: absolute;top: 0;} .left {left: 0;} .right {right: 0;} </style></head><body> <div class="viewport"> <div class="father" id="father"> <div>A</div><!-- 1 --> <div>B</div> <div>C</div><!-- 3 --> <div>D</div> <div>E</div><!-- 5 --> <div>F</div> <div>G</div><!-- 7 --><!-- ^…^ --> <div>A</div><!-- 1 --> <div>B</div> <div>C</div><!-- 3 --> <div>D</div> <div>E</div><!-- 5 --> <div>F</div> <div>G</div><!-- 7 --><!-- Counting is too hard. --> <div>A</div><!-- 1 --> <div>B</div> <div>C</div><!-- 3 --> <div>D</div> <div>E</div><!-- 5 --> <div>F</div> <div>G</div><!-- 7 --> </div> <div class="left" id="left">:-o</div> <div class="right" id="right">:-)</div> </div><script type="text/javascript">var father=document.getElementById("father"), sons=father.children, sonsLength=sons.length/3, showWidth=432+20*2, //432: width; 20*2: margin*2 showingId=parseInt(sonsLength/2)+sonsLength-1, transform=-showingId*showWidth+showWidth/2, checkTime=new Date()father.style.transform=`translate3d(${transform}px, 0, 0)`sons[showingId].className="showing"function go(nowShowingId, direction) { // Direction: "-1" stands for left, "1" stands for right. //+ Avoid continuous sliding if(new Date()-checkTime<700)return checkTime=new Date() //+ Standard show change sons[nowShowingId].className="" //- Change here nowShowingId=nowShowingId+direction showingId=nowShowingId; transform=nowShowingId*showWidth-showWidth/2 father.style.transform=`translate3d(-${transform}px, 0, 0)` sons[nowShowingId].className="showing" //+ Special show change if(nowShowingId==1){ showingId=sonsLength*2+1 // How does it works? } else if(nowShowingId==sonsLength*2+2){ showingId=1+1 // Imagine the answer. (Use DevTools! } else {return} //- change here setTimeout(function(){ father.classList.add("moving") sons[showingId].className="showing" setTimeout(function(){ father.style.transform=`translate3d(-${showingId*showWidth-showWidth/2}px, 0, 0)` sons[nowShowingId].className="" setTimeout(function(){ father.classList.remove("moving") },50) // =1. },530) // =2. },100) // =3. /= 1,2,3: Specified like that because of setTimeout's time error}document.getElementById("left").onclick=function (){go(showingId, -1)}document.getElementById("right").onclick=function (){go(showingId, 1)}</script></body></html>原理可以参考随后这篇文章新货！如何制作一个高效轮播图？