发表于： 2018-05-15 23:30:44
1 616
今天完成的事情：
做轮播图
明天计划的事情：
明天请假
遇到的问题：轮播图的实现，只实现了几个，却不能循环
收获：
深入了解了函数；
深入了解轮播图实现原理
下面是我的参考文献
<!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>
返回列表
评论