前端入坑纪 39
今天碰到个如题的效果（原谅我这长长的一大段形容词），本来是想随意找个插件就完事的。可谁料到找了老半天没几个合适的。看来我的“百度大法”级别还不够啊。
那就遵从毛主席的话：自己动手，丰衣足食！
OK，first things first！项目链接
以后手机相关的页面，都会上传github github项目地址
小截图一枚
HTML 结构
<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 结构
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 宽度就要设置为屏幕的好多倍，这就看Div.imgOurWrp的数量是多少了，我这里是5个，所以将Div.imgOurWrp 宽设为500%。然后因为Div.imgOurWrp在变换时要看到左右两边的同伴，所以Div.imgOurWrp的宽度就相应的减少了，我这里是16%，加上左右margin0.5%就是17%。
JS 结构
// 获取所有需要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 + "%)";
}
// 触摸发生时计算滑动的方向，已经得出对应的轮播图顺序号
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)
}
});
轮播其实写了很多了，这次因为轮播里要点击跳出，然后就发现了需要排除点击的动作，所以在touchstart时就的让startX和endX同一个值，那么如果没有滑动产生的话，自然就不会进入之后if的判断里了，也就不会有变换效果发生。
好了，到此，本文告一段落！感谢您的阅读！祝您和您的家人身体健康，阖家幸福！
网友评论