TA貢獻(xiàn)1891條經(jīng)驗 獲得超3個贊
唉~ 寫了半天~ 累啊
<!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>
原理可以參考隨后這篇文章新貨！如何制作一個高效輪播圖？
舉報