前端入坑紀 39
今天碰到個如題的效果（原諒我這長長的一大段形容詞），本來是想隨意找個插件就完事的郑现。可誰料到找了老半天沒幾個合適的荧降〗芋铮看來我的“百度大法”級別還不夠啊。
那就遵從毛主席的話：自己動手朵诫，豐衣足食辛友！
OK，first things first剪返！項目鏈接
以后手機相關(guān)的頁面废累，都會上傳github github項目地址
小截圖一枚
HTML 結(jié)構(gòu)
<div class="mainWrp">
<div id="scrolWrp" class="clear">
<div class="imgOurWrp" style="transform:translateX(1.5%)">
<div class="imgOur on">
<a href="javascript:;">
<div class="innerPos">
<p>點擊查看直播</p>
</div>
</a>
</div>
<div class="imgOur">
<a href="javascript:;">
<div class="innerPos">
<p>點擊查看直播</p>
</div>
</a>
</div>
<div class="imgOur">
<a href="javascript:;">
<div class="innerPos">
<p>點擊查看直播</p>
</div>
</a>
</div>
<div class="imgOur">
<a href="javascript:;">
<div class="innerPos">
<p>點擊查看直播</p>
</div>
</a>
</div>
<div class="imgOur">
<a href="javascript:;">
<div class="innerPos">
<p>點擊查看直播</p>
</div>
</a>
</div>
</div>
</div>
</div>
其實輪播都是老套路， id 為#scrolWrp 的Div 包裹著 一個大過屏幕寬度很多的Div.imgOurWrp脱盲。然后讓Div.imgOurWrp的translateX跟著里面的輪播圖Div.imgOur變邑滨。
CSS 結(jié)構(gòu)
body {
padding: 0;
margin: 0;
border-top: 1px solid #f4f4f4;
background-color: #F4F4F4;
}
p {
padding: 0;
margin: 0;
}
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
a {
text-decoration: none;
color: #525252;
}
img {
vertical-align: middle;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clear::after {
display: block;
content: "";
clear: both;
}
.mainWrp {
width: 100%;
max-width: 640px;
margin: 0 auto
}
#scrolWrp {
margin: 3% 0;
padding: 3% 0;
overflow: hidden;
}
.imgOur {
width: 16%;
margin: 0 .5%;
float: left;
}
.imgOur a {
position: relative;
display: block;
overflow: hidden;
width: 100%;
border-radius: 6px;
}
.imgOur a img {
width: 100%
}
.imgOurWrp {
-webkit-transition: all 370ms linear;
-moz-transition: all 370ms linear;
transition: all 370ms linear;
}
.imgOurWrp>div.on {
-webkit-transition: all 600ms ease-in;
-moz-transition: all 600ms ease-in;
transition: all 600ms ease-in;
transform: scale3d(1.1, 1.1, 1.1);
}
.imgOur .innerPos img {
width: 50%
}
.imgOurWrp {
width: 500%;
}
.innerPos {
position: absolute;
top: 50%;
left: 50%;
text-align: center;
line-height: 20px;
color: #fff;
transform: translate(-50%, -50%)
}
所以 id 為 #scrolWrp 的Div 需要 overflowe：hidden；而里面的Div.imgOurWrp 寬度就要設(shè)置為屏幕的好多倍宾毒，這就看Div.imgOurWrp的數(shù)量是多少了驼修，我這里是5個，所以將Div.imgOurWrp 寬設(shè)為500%诈铛。然后因為Div.imgOurWrp在變換時要看到左右兩邊的同伴乙各，所以Div.imgOurWrp的寬度就相應的減少了，我這里是16%幢竹，加上左右margin0.5%就是17%耳峦。
JS 結(jié)構(gòu)
// 獲取所有需要js操作的元素
var scrolWrp = document.getElementById('scrolWrp');
var scrolImgWrp = document.getElementsByClassName('imgOurWrp')[0];
var scrolItem = scrolImgWrp.getElementsByClassName("imgOur");
var indexNum = startX = endX = 0;
// 傳入對應的輪播圖的順序號，然后變換對應位置
function changeEft(num) {
for (var i = 0; i < scrolItem.length; i++) {
scrolItem[i].className = "imgOur";
}
scrolItem[num].className = "imgOur on";
var numStr = 1.5 - (17 * num);
scrolImgWrp.style.transform = "translateX(" + numStr + "%)";
}
// 觸摸發(fā)生時計算滑動的方向焕毫，已經(jīng)得出對應的輪播圖順序號
scrolWrp.addEventListener("touchstart", function(evt) {
startX = endX = evt.targetTouches[0].clientX; // startX=endX 排除點擊的響應
});
scrolWrp.addEventListener("touchmove", function(evt) {
endX = evt.targetTouches[0].clientX;
});
scrolWrp.addEventListener("touchend", function(evt) {
// 47是一個滑動距離的范圍蹲坷，可以按自己喜好確定
if (endX - startX > 47) {
indexNum > 0 ? indexNum-- : indexNum = scrolItem.length - 1;
changeEft(indexNum)
} else if (endX - startX < -47) {
indexNum < scrolItem.length - 1 ? indexNum++ : indexNum = 0;
changeEft(indexNum)
}
});
輪播其實寫了很多了驶乾，這次因為輪播里要點擊跳出，然后就發(fā)現(xiàn)了需要排除點擊的動作循签，所以在touchstart時就的讓startX和endX同一個值级乐，那么如果沒有滑動產(chǎn)生的話，自然就不會進入之后if的判斷里了县匠，也就不會有變換效果發(fā)生风科。
好了，到此乞旦，本文告一段落贼穆！感謝您的閱讀！祝您和您的家人身體健康兰粉，闔家幸福故痊！
