前端入坑紀(jì) 28
確切的說(shuō)，這個(gè)算是偽更新了孕似。只是改了幾行代碼鱼填，原諒這拙劣的套路。算是為了讓更多人看到臀晃，其實(shí)很多js的東西，稍微改改就行了介劫，不用特地找一摸一樣的效果徽惋。當(dāng)然拉，前提是你必須熟悉改之前的代碼座韵。
效果圖
OK险绘，first things first！項(xiàng)目鏈接
HTML 結(jié)構(gòu)
<div class="swipWrp">
<div id="swiper">
</div>
</div>
CSS結(jié)構(gòu)
.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結(jié)構(gòu)
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篇幅《左右滑動(dòng)出按鈕&刪除效果》類似
var startX = endX = 0;
// 觸摸開(kāi)始時(shí)誉碴，獲取觸摸開(kāi)始時(shí)的clientX值 宦棺，并暫停輪播的計(jì)時(shí)
swiper.addEventListener("touchstart", function(evt) {
startX = evt.targetTouches[0].clientX;
offEft();
});
// 移動(dòng)時(shí)計(jì)算滑動(dòng)的clientX值
swiper.addEventListener("touchmove", function(evt) {
endX = evt.targetTouches[0].clientX;
});
// 移動(dòng)結(jié)束時(shí)獲得滑動(dòng)的clientX值，判斷大小黔帕，以便確定左右方向代咸，最后繼續(xù)開(kāi)啟輪播計(jì)時(shí)
swiper.addEventListener("touchend", function(evt) {
if (endX - startX < 0) {
swiperRight()
} else {
swiperLeft()
}
onEft()
});
把變更的js添加了備注，其實(shí)這里的代碼和原先左右箭頭里的代碼基本是一樣的成黄。
好了呐芥，到此逻杖，本文告一段落！感謝您的閱讀思瘟！祝你身體健康荸百，闔家幸福！
