JavaScript实现移动端跟手轮播图

touch事件

了解触摸的仨事件：

事件	说明
touchstart事件	当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
touchmove	当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
touchend	当手指从屏幕上离开的时候触发。

这些事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但是它们却是以兼容DOM的方式实现的。所以，每个触摸事件的event对象都提供了在鼠标实践中常见的属性：bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时，鼠标指针的水平坐标)、clientY(返回当事件触发时，鼠标指针的垂直坐标)、screenX(当某个事件被触发时，鼠标指针的水平坐标)和screenY(返回当某个事件被触发时，鼠标指针的垂直坐标)。除了常见的DOM属性，触摸事件还包含下面三个用于跟踪触摸的属性。

事件	说明
touches	表示当前跟踪的触摸操作的touch对象的数组。
targetTouches	特定于事件目标的Touch对象的数组。
changeTouches	表示自上次触摸以来发生了什么改变的Touch对象的数组。

当然还有下面这些属性

clientX：触摸目标在视口中的x坐标。clientY：触摸目标在视口中的y坐标。identifier：标识触摸的唯一ID。pageX：触摸目标在页面中的x坐标。pageY：触摸目标在页面中的y坐标。screenX：触摸目标在屏幕中的x坐标。screenY：触摸目标在屏幕中的y坐标。target：触目的DOM节点目标。

好了，下面开始移动端的轮播图了

html

<body>
<div class="container"><ul class="list"><li class="item "><img src="data:images/1.jpg" alt=""></li><li class="item"><img src="data:images/2.jpg" alt=""></li><li class="item"><img src="data:images/3.jpg" alt=""></li><li class="item"><img src="data:images/4.jpg" alt=""></li><li class="item"><img src="data:images/5.jpg" alt=""></li></ul><ul class="point">
<!--        <li class="point-item active" ></li>-->
<!--        <li class="point-item"></li>-->
<!--        <li class="point-item"></li>--></ul>
</div>
</body>

css

.container{width: 100%;background-color: gray;position: relative;
}
.container .list{/*width: 300%;*/overflow: hidden;
}
.container .list::after{content: "";display: block;clear: both;
}
.container .list .item{/*width: 375px;*/float: left;
}
.container .list .item img{width: 100%;height: 188px;
}.point{height: 10px;position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);
}
.point-item{width: 8px;height: 8px;margin: 0 5px;background-color: #FFFFFF;opacity: .2;border-radius: 8px;float: left;
}
.point-item.active{opacity: 1;
}

js

var items = document.getElementsByClassName('item');
var list  = document.getElementsByClassName('list')[0];
var container = document.getElementsByClassName('container')[0];//小点
var pointWrap = document.getElementsByClassName('point')[0];var points = [];//创建点
var _createPoint = function (i){var pointDom = document.createElement('li');pointDom.classList.add('point-item');//给第一项activeif (i === 0){pointDom.classList.add('active');}points.push(pointDom);pointWrap.appendChild(pointDom);
}//移动端屏幕宽度兼容问题
for(var i = 0 ; i < items.length ; i++){items[i].style.width = window.innerWidth + 'px';_createPoint(i);
}
list.style.width = items.length*window.innerWidth +'px';var state ={beginX :0,//开始x的位置endX:0, //结束x的位置nowX:0, //当前x的位置index:0,
}
//跟手函数
var _slice = function (){var deltaX =  state.nowX - state.beginX;list.style.marginLeft = -(window.innerWidth * state.index) + deltaX + 'px';
}var _reset = function (){//需要一个过度使得复位更加自然list.style.transition = "all .3s";//现在在第几张，就要复位到那一张list.style.marginLeft = (-state.index * window.innerWidth) + 'px';
}
var _goPrev = function (){if(state.index > 0){state.index --;list.style.transition = "all .3s";list.style.marginLeft = -state.index * window.innerWidth +'px';_setIndex();}else{//复位_reset();}
}var _goNext = function (){if(state.index < items.length -1){state.index ++;list.style.transition = "all .3s";list.style.marginLeft = -state.index * window.innerWidth +'px';_setIndex();}else{//复位_reset();}
}var _judgeMove = function (){var deltaX = state.endX - state.beginX;if(deltaX >= window.innerWidth *2/5){//上一张// console.log('上一张');_goPrev();}else if(deltaX <= -window.innerWidth *2/5){//下一张// console.log('下一张');_goNext();}else{//不动console.log('不动');_reset();}
}//touchstart 触摸开始container.addEventListener('touchstart',function (e){//去除过渡，获得良好的反馈list.style.transition = 'none';state.beginX = e.targetTouches[0].clientX;// console.log(e.targetTouches);
});//touchmove 触摸移动
container.addEventListener('touchmove',function (e){// console.log(e.changedTouches);state.nowX = e.changedTouches[0].clientX;// state.nowX = nowX;  //记录nowX_slice();
});//touchend 触摸取消
container.addEventListener('touchend',function (e) {state.endX = e.changedTouches[0].clientX;_judgeMove();
});//根据index来切换active类名
var _setIndex = function (){var index = state.index;for(var i = 0 ; i < points.length ; i++){points[i].classList.remove('active');}points[index].classList.add('active');
}

【注】

1、我html引用了reset.css重置样式

详情可移至https://blog.csdn.net/weixin_45825426/article/details/112795171

2、如果在做的时候出现了页面整体样式并不好看，宽度并不是自己想要的，比例出了问题，出现下图效果：

那是因为我们大部分移动设备默认的viewport都是980px，所以要添加以下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

效果图

JavaScript实现移动端跟手轮播图相关推荐

横向自动轮播图html代码,JavaScript实现PC端横向轮播图
JavaScript实现PC端横向轮播图发布时间:2020-09-09 02:10:03 来源:脚本之家阅读:100 作者:菜鸟向往蓝天本文实例为大家分享了JavaScript实现PC端横向轮播 ...
swiper4.0（移动端）轮播图 - 案例篇
swiper4.0(移动端)轮播图 - 案例篇官方演示地址:异形的slide · 点击前往查看 banner 效果图: 代码: <!DOCTYPE html> <html lang ...
手机端网页制作轮播图html怎么写,原生JS实现移动端web轮播图详解（结合Tween算法造轮子）...
前言相信大家应该都知道,移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改 ...
JavaScript+HTML+CSS 无缝滚动轮播图的两种方式
第一种方式在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...
vue pc端商品轮播图_轮播图高点击商品图
轮播图由背景,商品图,文案三大部分组成,其中商品图是轮播图的主体内容,在轮播主图中,能不能通过一张商品图呈现出商品信息或者卖点,是影响点击率高低的重要因素.本期内容,我们将从商品图出发,为大家讲解的轮 ...
用JavaScript语言制作简易版轮播图
//代码示例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
手html左右轮播,移动端横向滑屏之轮播图
图片描述移动端的轮播图可以有很多方式实现,最常见的可以使用定位 + 手指事件.但是我这里介绍的是 CSS3 中的 2d 变换和手指事件,因为变换属性的代码更加简洁优雅一. 移动端的准备工作 * { ...
轮播图动画滑动动画效果
轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...
bootstrap实战--微金所项目(轮播图1)
使用HTML+CSS实现响应式轮播图一.轮播图展示移动端(< 768px) 非移动端(>768px) 二.轮播图实现思路移动端 1).在移动端可以直接使用bootstrap提供的相关 ...

JavaScript实现移动端跟手轮播图

touch事件

当然还有下面这些属性

好了，下面开始移动端的轮播图了

html

css

js

【注】

效果图

JavaScript实现移动端跟手轮播图相关推荐

最新文章

热门文章