轮播图案例
特点：
1.这个案例利用了transform属性改变 translateX 属性切换图片（这种方式性能高）；
2.这里封装了一个处理translate的js文件，用于设置translateX数据和获取数据；
3.实现了最后的滑动速度和每次的滑动距离判断是否切换页面；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
overflow: hidden;
}
#test {
position: absolute;
width: 100%;
}
#test ul {
position: absolute;
}
#test .points-wrap {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
#test .points-wrap span {
width: 10px;
height: 10px;
background: green;
display: inline-block;
border-radius: 50%;
margin: 0 3px;
}
#test > .points-wrap > span.active {
background: deeppink;
}
</style>
</head>
<body>
<div>
<div id="test" class="carousel-wrap">
</div>
</div>
<script src="js/transform.js"></script>
<script type="text/javascript">
window.onload = function () {
//禁止所有的事件；
document.addEventListener("touchstart", function (even) {
even = even || event;
even.preventDefault();
});
let paths = ["img/01.jpg", "img/02.jpg", "img/03.jpg", "img/04.jpg", "img/05.jpg"];
let strs = paths.concat(paths);
function carousel(strs) {
let div_carousel = document.querySelector(".carousel-wrap");
if (div_carousel) {
//创建ul，并给ul中添加li、a、img；
let ul_element = document.createElement("ul");
for (let i = 0; i < strs.length; i++) {
ul_element.innerHTML += "<li><a href='javascript:;'><img src=" + strs[i] + "/></a></li>";
}
//将ul添加到div中去；
div_carousel.appendChild(ul_element);
//创建style样式标签
var styleNode = document.createElement("style");
styleNode.innerHTML = ".carousel-wrap > ul > li{width: " + (1 / strs.length * 100) + "%;float: left;}" +
".carousel-wrap > ul{width: " + strs.length + "00%;overflow: hidden;}" +
".carousel-wrap > ul >li >a>img{width: 100%;display: block;}";
//添加style标签到head中去；
document.head.appendChild(styleNode);
//因为给ul设置了定位，所有他的父亲 div 的高度就成0了，这里延迟100毫秒等img渲染完成后获取img的高度，设置给div；
var imgNodes = document.querySelector(".carousel-wrap > ul > li > a >img");
setTimeout(function () {
div_carousel.style.height = imgNodes.offsetHeight + "px";
}, 200);
//创建points的盒子，并添加span标签，设置圆角背景形成小圆点；
let htmlElement = document.createElement('div');
htmlElement.classList.add("points-wrap");
div_carousel.appendChild(htmlElement);
let div_points_element = document.querySelector(".carousel-wrap .points-wrap");
let pointsSpan = null;
if (div_points_element) {
for (let i = 0; i < paths.length; i++) {
if (i == 0) {
div_points_element.innerHTML += '<span class="active"></span>';
} else {
div_points_element.innerHTML += '<span></span>';
}
}
pointsSpan = document.querySelectorAll(".carousel-wrap > .points-wrap > span");
}
//手指一开始的位置
var startX = 0;
//元素一开始的位置
var elementX = 0;
let index = 0;
let disX = 0;
let isScroll = true; //这个值控制滑动的距离不能超过屏幕的宽度；
let temp = 0;
let speek = 0;
div_carousel.addEventListener("touchstart", function (ev) {
ev = ev || event;
isScroll = true;
temp = speek = 0;
var TouchC = ev.changedTouches[0];
ul_element.style.transition = "none";
startX = TouchC.clientX;
//获取ul距离父的左边距；
//elementX = ul_element.offsetLeft;
if (index === 0) {
trans.transform(ul_element, "translateX", -(paths.length * document.documentElement.clientWidth));
} else if (index === strs.length - 1) {
trans.transform(ul_element, "translateX", -((paths.length - 1) * document.documentElement.clientWidth));
}
elementX = trans.transform(ul_element, "translateX");
});
div_carousel.addEventListener("touchmove", function (ev) {
if (!isScroll) {
return;
}
ev = ev || event;
let changedTouch = ev.changedTouches[0];
//获取x轴的坐标；相对于浏览器页面（或客户区）的水平坐标
let nowX = changedTouch.clientX;
disX = nowX - startX;
if(temp!==0){
//计算最后滑动的速度；根据这个速度可以判断要不要切换下一页；
speek = Math.abs(nowX - temp);
}
temp = nowX;
if (Math.abs(disX) >= document.documentElement.clientWidth) {
isScroll = false;
}
//ul_element.style.left = elementX + disX + "px";
trans.transform(ul_element, "translateX", elementX + disX);
});
div_carousel.addEventListener("touchend", function (ev) {
//index抽象了ul的实时位置，计算当前的滑动的位置；
//超出控制，通过left除以完美宽度得到index；
let offsetLeft = trans.transform(ul_element, "translateX");
index = offsetLeft / document.documentElement.clientWidth;
//console.log("speek:" + speek);
if (speek >= 7) {
//速度大于1.5时，就可以切换下一页了；
if (disX <= 0) {
//向左滑动
index = Math.ceil(Math.abs(index));
} else {
//向右滑动
index = Math.floor(Math.abs(index));
}
} else {
index = Math.abs(Math.round(index));
}
//console.log("touchend:" + index);
//设置left的动画
ul_element.style.transition = ".5s transform";
//ul_element.style.left = index * (document.documentElement.clientWidth) + "px";
trans.transform(ul_element, "translateX", -index * (document.documentElement.clientWidth));
//设置points的ui；
var position = index % paths.length;
for (let i = 0; (pointsSpan != null && i < pointsSpan.length); i++) {
pointsSpan[i].classList.remove("active");
}
pointsSpan[position].classList.add("active");
})
}
}
carousel(strs);
};
</script>
</body>
</html>
transform.js文件
(function (win) {
win.trans = {
transform: tran
};
function tran(node, name, val) {
if (node !== null && node !== undefined && node.transform === undefined) {
node.transform = {};
}
if (arguments.length === 3) {
//三个参数表示是设置；
var text = "";
node.transform[name] = val;
for (var item in node.transform) {
if (node.transform.hasOwnProperty(item)) {
switch (item) {
case "translateX":
case "translateY":
text += item + "(" + node.transform[item] + "px)";
break;
case "scale":
text += item + "(" + node.transform[item] + ")";
break;
case "rotate":
text += item + "(" + node.transform[item] + "deg)";
break;
}
}
}
node.style.transform = node.style.webkitTransform = text;
} else if (arguments.length === 2) {
//读取
val = node.transform[name];
if (val === undefined) {
switch (name) {
case "translateX":
case "translateY":
case "rotate":
val = 0;
break;
case "scale":
val = 1;
break;
}
}
return val;
}
}
})(window);
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
