您的位置：首页 > 移动开发

3、js原生实现移动端手指滑动轮播图效果(3)

2017-10-19 15:34 1041 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<title>3、js原生实现移动端手指滑动轮播图效果(3)</title>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
*{
margin: 0;
padding: 0;
}

html, body {
height: 100%;
width: 100%;
}

ul, ol {
list-style: none;
}

/*清除浮动*/

.box{
height: 50vh;
width: 100vw;
background: red;
}
.box1{
background: yellow;
}
.box2{
background: yellowgreen;
}
.box3{
background: cyan;
}
.box4{
background: orange;
}
/*轮播图*/
.banner{
position: relative;
top: 10vh;
width: 100vw;
height: 100%;
overflow: hidden;
}
.li{
position: absolute;
left: 0;
top:0;
}
.li:nth-of-type(1){
left:0;
}
.li:nth-of-type(2){
left:375px;
}

.li:nth-of-type(3){
left:700px;
}

.li:nth-of-type(4){
left:1075px;
}

</style>
</head>
<body>
<div class="banner">
<ul class="ul1">
<li class="li">
<div class="box box1">1111</div>
</li>
<li class="li">
<div class="box box2">2222</div>
</li class="li">
<li class="li">
<div class="box box3">3333</div>
</li>
<li class="li">
<div class="box box4">444</div>
</li>
</ul>
</div>
</body>
</html>
<script>
var banner = document.querySelector('.banner');
var width = banner.offsetWidth;
var ul1Node = banner.querySelector('.ul1');
var liNode = document.querySelectorAll('.li');
var liLength = liNode.length;

var startX = 0;//开始坐标
var moveX = 0;//移动时x的坐标
var distancex = 0;//移动距离
var isMove = false;//是否滑动过

var index = 0;//当前图片索引

banner.addEventListener('touchstart',(e) => {
startX = e.touches[0].clientX;
})
banner.addEventListener('touchmove',(e) => {
moveX = e.touches[0].clientX;
distancex = moveX - startX;
translateX(ul1Node,-index * width + distancex);
})
banner.addEventListener('touchend',(e) => {
if( Math.abs(distancex) > (width/2) ){
if (distancex > 0) {
if(index >= 1){
index --;
}else{
index = 0
}
} else {
if(index < liLength-1){
index ++;
}else{
index =liLength-1
}
}
addTransition();
translateX(ul1Node,-index * width);
}else {
addTransition();
translateX(ul1Node,-index * width);
}
console.log(index);
})
/*公用方法*/
//添加过渡
var addTransition = function () {
ul1Node.style.webkitTransition = 'all .2s ';
ul1Node.style.transition = "all .2s";
}
//删除过渡
var removeTransition = function () {
ul1Node.style.webkitTransition = 'none';
ul1Node.style.transition = "none";
}
// 设置定位
var translateX = function (ul1Node,x) {
ul1Node.style.webkitTransform = 'translateX(' + x + 'px)';
ul1Node.style.transform = 'translateX(' + x + 'px)';
}

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航