前端入坑纪 33
挖坑了，最近忙着写html5的小游戏，少了更新。
这会儿，乘着有空，稍微更新一个先前的轮播效果。
闲言少叙，直入正题。
又是一个轮播
OK，first things first！项目链接
HTML 结构
<div class="swipWrp">
<div id="swiper" class="clear">
</div>
</div>
依旧简洁的div#swiper 宽度为400%（100%*4）包裹图片，让图片向左浮动，并且宽度为25%（100%/4）。而div.swipWrp是用来定位轮播里的小圆点的（代码里生成）
CSS 结构
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)
}
轮播里的图片和小圆点切换都加了过渡动画。至于从css开始到.clear类的那些都是重置样式，基本我的项目里都有。小伙伴应该很熟悉了。
JS 结构
var swiper = document.getElementById("swiper");// 获取轮播本身
var imgs = swiper.getElementsByTagName("img");// 获取轮播里的图片
var indx = 0;// 轮播变换的顺序id
var timers = null;// 最开始设定存放计时器的变量
// 这里开始就是创建切换轮播时的小圆点
var nodeFgmt = document.createDocumentFragment();// 创建个文档片段，存放接下来生产的html文档
newNode = document.createElement("div");// 创建个div
newNode.id = "tags";// 给新的div一个id
// 根据图片数创建相应数量的a标签
for(var i = 0; i < imgs.length; i++) {
var ond = document.createElement("a");
ond.href = "javascript:;";
ond.setAttribute("data-indx", i);// 给每个a设置自定义属性“data-indx”
nodeFgmt.appendChild(ond);// 把所有的a加到之前创建的文档片段里
}
newNode.appendChild(nodeFgmt);// 把文档片段加到前面创建的div里
swiper.parentNode.appendChild(newNode);// 给轮播的父级添加上面创建好的div#tags
var tagsA = document.getElementById("tags").getElementsByTagName("a");// 创建完就获取里面的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();
}
}
// 默认第一个a为选中
tagsA[0].className = "on";
// 重置所有a的class为空，也就是都未不选中状态
function hideAll() {
for(var i = 0; i < imgs.length; i++) {
tagsA[i].className = ""
}
}
// 调用轮播效果的代码
function scrollIntvel() {
timers = setInterval(function() {
hideAll()
if(indx < imgs.length - 1) {
indx++;
} else {
indx = 0;
}
changeEffect(indx);
}, 3600);
}
// 轮播切换时的代码
function changeEffect(indx) {
swiper.style.transform = "translateX(-" + 25 * indx + "%)";
tagsA[indx].className = "on";
}
// 开启效果
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);
}
// 判断左滑，还是右滑，并执行对应效果
var startX = endX = 0; // 先定义个存放x轴上的开始位置和结束位置的变量
// 获取开始触摸时x轴位置，并停止自动轮播的效果
swiper.addEventListener("touchstart", function(evt) {
startX =endX = evt.targetTouches[0].clientX;
offEft();
});
// 获取触摸过程中x轴位置
swiper.addEventListener("touchmove", function(evt) {
endX = evt.targetTouches[0].clientX;
});
// 滑动结束时判断方向，执行对应效果，并开启自动轮播的效果
swiper.addEventListener("touchend", function(evt) {
if (endX - startX < -47) {
swiperRight()
} else if (endX - startX > 47) {
swiperLeft()
}
onEft()
});
因为是挖坑，所以这次代码备注的也特别详细，不然感觉对不起小伙伴。那么有兴趣的同学，可以好好研究一翻，期待你我共同进步！！！
好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！
网友评论