前端入坑纪 19
最近这段时间一直在做公司自己的项目，忙的不可开交。而且手头上那次给同学定制的网站也被要求 “回炉再造” ，整个人都要不好不好了～
人生的处境可真是够激荡起伏的啊！！！
那么，老规矩，先上截图
效果图
OK，first things first！项目链接
HTML 结构
<div class="swipWrp">
<a id="arwL" href="javascript:;" class="arwL"></a>
<div id="swiper">
</div>
<a id="arwR" href="javascript:;" class="arwR"></a>
</div>
轮播里的标示图片位置的圆点是用JS动态生成的，数量等于图片的数量
CSS 结构
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)
}
这里轮播自适应的样式，和以前发的轮播是差不多的原理，就不赘述了。
JS 结构
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();
// 这里是动态添加位置原点的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");
// 鼠标滑过原点时显示对应的轮播图片
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);
}
// 切轮播图的函数，传入对应的轮播图序号
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);
}
// 鼠标滑过时的切换动作函数
function onEft() {
scrollIntvel()
// console.log("scrolling now ")
}
// 鼠标滑出时的切换动作函数
function offEft() {
clearInterval(timers);
// console.log("stopping now ")
}
// 启动轮播效果
scrollIntvel()
// 鼠标滑入滑出的函数调用
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有点多，本来想写的简单点。可是码着码着就变成现在这个样子了。原理和先前文章的也是差不多，有兴趣的小伙伴可以好好研究一番。
