前端入坑纪 28
确切的说，这个算是伪更新了。只是改了几行代码，原谅这拙劣的套路。算是为了让更多人看到，其实很多js的东西，稍微改改就行了，不用特地找一摸一样的效果。当然拉，前提是你必须熟悉改之前的代码。
效果图
OK，first things first！项目链接
HTML 结构
<div class="swipWrp">
<div id="swiper">
</div>
</div>
CSS结构
.swipWrp {
position: relative;
width: 100%;
margin: 0 auto;
overflow: hidden;
}
#swiper {
position: relative;
overflow: hidden;
text-align: center;
background-color: #fff;
}
#swiper img {
display: none;
margin: 0 auto;
width: 100%;
transition: all 300ms linear 60ms;
}
#tags {
position: absolute;
bottom: 6px;
left: 0;
width: 100%;
text-align: center;
}
#tags a {
display: inline-block;
transition: all 1s ease;
width: 12px;
height: 12px;
margin: 3px 6px;
border-radius: 8px;
background-color: rgba(255, 255, 255, .8)
}
#tags a.on {
transform: scale(1.2, 1.2);
background-color: rgba(255, 255, 255, .5)
}
JS结构
var swiper = document.getElementById("swiper");
var imgs = swiper.getElementsByTagName("img");
var indx = 0;
var timers = null;
var nodeFgmt = document.createDocumentFragment();
newNode = document.createElement("div");
newNode.id = "tags";
for (var i = 0; i < imgs.length; i++) {
var ond = document.createElement("a");
ond.href = "javascript:;";
ond.setAttribute("data-indx", i);
nodeFgmt.appendChild(ond);
}
newNode.appendChild(nodeFgmt);
swiper.appendChild(newNode);
var tagsA = document.getElementById("tags").getElementsByTagName("a");
for (var s = 0; s < tagsA.length; s++) {
tagsA[s].onmouseover = function() {
offEft();
hideAll();
var indxA = this.getAttribute("data-indx");
changeEffect(indxA);
this.className = "on"
}
tagsA[s].onmouseout = function() {
onEft();
}
}
tagsA[0].className = "on";
imgs[0].style.display = "block";
imgs[0].style.opacity = "1";
function hideAll() {
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.display = "none";
imgs[i].style.opacity = "0";
tagsA[i].className = ""
}
}
function scrollIntvel() {
timers = setInterval(function() {
hideAll();
if (indx < imgs.length - 1) {
indx++;
} else {
indx = 0;
}
changeEffect(indx);
}, 3600);
}
function changeEffect(indx) {
imgs[indx].style.display = "block";
setTimeout(function() {
imgs[indx].style.opacity = "1";
tagsA[indx].className = "on";
}, 30);
}
function onEft() {
scrollIntvel()
}
function offEft() {
clearInterval(timers);
}
scrollIntvel()
function swiperLeft() {
hideAll();
if (indx > 0) {
indx--;
} else {
indx = imgs.length - 1;
}
changeEffect(indx);
}
function swiperRight() {
hideAll();
if (indx < imgs.length - 1) {
indx++;
} else {
indx = 0;
}
changeEffect(indx);
}
// 这里的代码和 第26篇幅《左右滑动出按钮&删除效果》类似
var startX = endX = 0;
// 触摸开始时，获取触摸开始时的clientX值 ，并暂停轮播的计时
swiper.addEventListener("touchstart", function(evt) {
startX = evt.targetTouches[0].clientX;
offEft();
});
// 移动时计算滑动的clientX值
swiper.addEventListener("touchmove", function(evt) {
endX = evt.targetTouches[0].clientX;
});
// 移动结束时获得滑动的clientX值，判断大小，以便确定左右方向，最后继续开启轮播计时
swiper.addEventListener("touchend", function(evt) {
if (endX - startX < 0) {
swiperRight()
} else {
swiperLeft()
}
onEft()
});
把变更的js添加了备注，其实这里的代码和原先左右箭头里的代码基本是一样的。
好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！
