前端入坑紀(jì) 33
挖坑了，最近忙著寫html5的小游戲，少了更新。
這會(huì)兒，乘著有空，稍微更新一個(gè)先前的輪播效果。
閑言少敘，直入正題。
又是一個(gè)輪播
OK，first things first！項(xiàng)目鏈接
HTML 結(jié)構(gòu)
<div class="swipWrp">
<div id="swiper" class="clear">
</div>
</div>
依舊簡(jiǎn)潔的div#swiper 寬度為400%（100%*4）包裹圖片，讓圖片向左浮動(dòng)，并且寬度為25%（100%/4）。而div.swipWrp是用來(lái)定位輪播里的小圓點(diǎn)的（代碼里生成）
CSS 結(jié)構(gòu)
body {
padding: 0;
margin: 0;
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;
}
.swipWrp {
position: relative;
width: 100%;
margin: 0 auto;
overflow: hidden;
}
#swiper {
width: 400%;
position: relative;
overflow: hidden;
text-align: center;
transition: all 400ms ease-in;
background-color: #ededed;
}
#swiper img {
float: left;
margin: 0 auto;
width: 25%;
}
#tags {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
#tags a {
display: inline-block;
transition: all 1s ease;
width: 9px;
height: 9px;
margin: 3px 6px;
border-radius: 4.5px;
background-color: rgba(255, 255, 255, .5)
}
#tags a.on {
transform: scale(1.2, 1.2);
background-color: rgba(255, 255, 255, .85)
}
輪播里的圖片和小圓點(diǎn)切換都加了過(guò)渡動(dòng)畫。至于從css開始到.clear類的那些都是重置樣式，基本我的項(xiàng)目里都有。小伙伴應(yīng)該很熟悉了。
JS 結(jié)構(gòu)
var swiper = document.getElementById("swiper");// 獲取輪播本身
var imgs = swiper.getElementsByTagName("img");// 獲取輪播里的圖片
var indx = 0;// 輪播變換的順序id
var timers = null;// 最開始設(shè)定存放計(jì)時(shí)器的變量
// 這里開始就是創(chuàng)建切換輪播時(shí)的小圓點(diǎn)
var nodeFgmt = document.createDocumentFragment();// 創(chuàng)建個(gè)文檔片段，存放接下來(lái)生產(chǎn)的html文檔
newNode = document.createElement("div");// 創(chuàng)建個(gè)div
newNode.id = "tags";// 給新的div一個(gè)id
// 根據(jù)圖片數(shù)創(chuàng)建相應(yīng)數(shù)量的a標(biāo)簽
for(var i = 0; i < imgs.length; i++) {
var ond = document.createElement("a");
ond.href = "javascript:;";
ond.setAttribute("data-indx", i);// 給每個(gè)a設(shè)置自定義屬性“data-indx”
nodeFgmt.appendChild(ond);// 把所有的a加到之前創(chuàng)建的文檔片段里
}
newNode.appendChild(nodeFgmt);// 把文檔片段加到前面創(chuàng)建的div里
swiper.parentNode.appendChild(newNode);// 給輪播的父級(jí)添加上面創(chuàng)建好的div#tags
var tagsA = document.getElementById("tags").getElementsByTagName("a");// 創(chuàng)建完就獲取里面的a吧
// 給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();
}
}
// 默認(rèn)第一個(gè)a為選中
tagsA[0].className = "on";
// 重置所有a的class為空，也就是都未不選中狀態(tài)
function hideAll() {
for(var i = 0; i < imgs.length; i++) {
tagsA[i].className = ""
}
}
// 調(diào)用輪播效果的代碼
function scrollIntvel() {
timers = setInterval(function() {
hideAll()
if(indx < imgs.length - 1) {
indx++;
} else {
indx = 0;
}
changeEffect(indx);
}, 3600);
}
// 輪播切換時(shí)的代碼
function changeEffect(indx) {
swiper.style.transform = "translateX(-" + 25 * indx + "%)";
tagsA[indx].className = "on";
}
// 開啟效果
function onEft() {
scrollIntvel()
}
// 關(guān)閉效果
function offEft() {
clearInterval(timers);
}
scrollIntvel() // 運(yùn)行調(diào)用輪播效果
// 左滑時(shí)的要執(zhí)行的效果
function swiperLeft() {
hideAll();
if(indx > 0) {
indx--;
} else {
indx = imgs.length - 1;
}
changeEffect(indx);
}
// 右滑時(shí)的要執(zhí)行的效果
function swiperRight() {
hideAll();
if(indx < imgs.length - 1) {
indx++;
} else {
indx = 0;
}
changeEffect(indx);
}
// 判斷左滑，還是右滑，并執(zhí)行對(duì)應(yīng)效果
var startX = endX = 0; // 先定義個(gè)存放x軸上的開始位置和結(jié)束位置的變量
// 獲取開始觸摸時(shí)x軸位置，并停止自動(dòng)輪播的效果
swiper.addEventListener("touchstart", function(evt) {
startX =endX = evt.targetTouches[0].clientX;
offEft();
});
// 獲取觸摸過(guò)程中x軸位置
swiper.addEventListener("touchmove", function(evt) {
endX = evt.targetTouches[0].clientX;
});
// 滑動(dòng)結(jié)束時(shí)判斷方向，執(zhí)行對(duì)應(yīng)效果，并開啟自動(dòng)輪播的效果
swiper.addEventListener("touchend", function(evt) {
if (endX - startX < -47) {
swiperRight()
} else if (endX - startX > 47) {
swiperLeft()
}
onEft()
});
因?yàn)槭峭诳?，所以這次代碼備注的也特別詳細(xì)，不然感覺對(duì)不起小伙伴。那么有興趣的同學(xué)，可以好好研究一翻，期待你我共同進(jìn)步?。?！
好了，到此，本文告一段落！感謝您的閱讀！祝你身體健康，闔家幸福！
