前端入坑紀(jì) 19
最近這段時間一直在做公司自己的項目，忙的不可開交。而且手頭上那次給同學(xué)定制的網(wǎng)站也被要求 “回爐再造” ，整個人都要不好不好了～
人生的處境可真是夠激蕩起伏的啊?。。?/p>
那么，老規(guī)矩，先上截圖
效果圖
OK，first things first！項目鏈接
HTML 結(jié)構(gòu)
<div class="swipWrp">
<a id="arwL" href="javascript:;" class="arwL"></a>
<div id="swiper">
</div>
<a id="arwR" href="javascript:;" class="arwR"></a>
</div>
輪播里的標(biāo)示圖片位置的圓點是用JS動態(tài)生成的，數(shù)量等于圖片的數(shù)量
CSS 結(jié)構(gòu)
body {
font-family: "Microsoft YaHei", Verdana, Geneva, Tahoma, sans-serif;
}
html,
body,
ul,
li {
margin: 0;
padding: 0
}
.clearfix::after {
content: "";
display: table;
clear: both
}
::-webkit-scrollbar {
display: none
}
ul,
li {
list-style: none
}
.swipWrp {
position: relative;
width: 100%;
overflow: hidden;
}
#swiper {
position: relative;
padding: 28% 50%;
overflow: hidden;
}
#swiper img {
display: none;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
transition: all 300ms linear 60ms;
}
.arwL,
.arwR {
background-color: rgba(255, 255, 255, .5);
border-radius: 50%;
display: block;
position: absolute;
padding: 3%;
background-size: 50% auto;
background-position: center center;
background-repeat: no-repeat;
top: 50%;
transform: translateY(-50%);
z-index: 9
}
.arwL {
left: 0;
background-image: url("http://sandbox.runjs.cn/uploads/rs/113/ajzbmzhg/arrowL.png")
}
.arwR {
right: 0;
background-image: url("http://sandbox.runjs.cn/uploads/rs/113/ajzbmzhg/arrowR.png")
}
#tags {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
#tags a {
display: inline-block;
width: 16px;
height: 16px;
margin: 3px 6px;
border-radius: 8px;
background-color: rgba(0, 0, 0, .5)
}
#tags a.on {
background-color: rgba(255, 255, 255, .5)
}
這里輪播自適應(yīng)的樣式，和以前發(fā)的輪播是差不多的原理，就不贅述了。
JS 結(jié)構(gòu)
var swiper = document.getElementById("swiper");
var imgs = swiper.getElementsByTagName("img");
var arwL = document.getElementById("arwL");
var arwR = document.getElementById("arwR");
var indx = 0;
var timers = null;
var nodeFgmt = document.createDocumentFragment();
// 這里是動態(tài)添加位置原點的js代碼
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");
// 鼠標(biāo)滑過原點時顯示對應(yīng)的輪播圖片
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();
}
}
// 這里是初始化輪播的3條代碼
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 = ""
}
}
// 每隔3.6秒切換輪播圖
function scrollIntvel() {
timers = setInterval(function() {
hideAll();
if (indx < imgs.length - 1) {
indx++;
} else {
indx = 0;
}
changeEffect(indx);
}, 3600);
}
// 切輪播圖的函數(shù)，傳入對應(yīng)的輪播圖序號
function changeEffect(indx) {
imgs[indx].style.display = "block";
// console.log("imgs的indx ", indx)
setTimeout(function() {
imgs[indx].style.opacity = "1";
tagsA[indx].className = "on";
// console.log("times的indx ", indx)
}, 30);
}
// 鼠標(biāo)滑過時的切換動作函數(shù)
function onEft() {
scrollIntvel()
// console.log("scrolling now ")
}
// 鼠標(biāo)滑出時的切換動作函數(shù)
function offEft() {
clearInterval(timers);
// console.log("stopping now ")
}
// 啟動輪播效果
scrollIntvel()
// 鼠標(biāo)滑入滑出的函數(shù)調(diào)用
arwL.onmouseover = offEft;
arwR.onmouseover = offEft;
arwL.onmouseout = onEft;
arwR.onmouseout = onEft;
// 左箭頭點擊效果
arwL.onclick = function() {
hideAll();
if (indx > 0) {
indx--;
} else {
indx = imgs.length - 1;
}
changeEffect(indx);
}
// 右箭頭點擊效果
arwR.onclick = function() {
hideAll();
if (indx < imgs.length - 1) {
indx++;
} else {
indx = 0;
}
changeEffect(indx);
}
這會的JS有點多，本來想寫的簡單點。可是碼著碼著就變成現(xiàn)在這個樣子了。原理和先前文章的也是差不多，有興趣的小伙伴可以好好研究一番。
