首先 我们想实现的效果是在手指按下拖动的时候图片能够跟随移动(无动画效果)然后松开手指后判断图片移动的位置 和某一个值进行比较

在这里我们默认定为盒子的1/3宽度 当x轴的移动位置大于1/3的时候图片切换到下一张或者上一张(此时需要有动画效果)

当图片移动位置小于1/3的时候 抬起手指的图片回到原位( 此时也有动画效果)  具体代码如下

布局就是简单的长列形式  让最外层的banner固定宽多余的隐藏  ul的宽度这足够大  通过移动ul的left值实现图片的移动  基本上就是PC 端的左右轮播

HTML 部分

           <div class="banner">
<ul>
<li><img src="./app/img/1.jpg" alt=""></li>
<li><img src="./app/img/2.jpg" alt=""></li>
<li><img src="./app/img/3.jpg" alt=""></li>
<li><img src="./app/img/4.jpg" alt=""></li>
<li><img src="./app/img/5.jpg" alt=""></li>
<li><img src="./app/img/6.jpg" alt=""></li>
</ul>
</div>

CSS 部分

 main .banner {
width: 100%;
height: 4.58667rem;
overflow: hidden;
margin-top: 0.05333rem;
position: relative;
} main .banner ul {
width: 600%;
height: 4.58667rem;
display: flex;
position: absolute;
left:;
} main .banner ul li {
width: 100%;
height: 4.58667rem;
} main .banner ul li img {
width: 100%;
height: 100%;
}

JS 部分

 /**
* @function[此函数作用封装手机端轮播]
* 此题需主要几个点 首先加transition : all 1s linear;是放在css中 后来发现在拖着动的时候也有动画 为了不让拖着动的
* 时候有动画 于是采用translate 与left相结合的方法实现 但是很快又发现两个位置会出现叠加问题 然后哦嘛噶出现各种归零及
* 恢复当前位置的死循坏中了 最后还是放弃了 然后用left 在用到的用style加上动画效果 不需要的地方再把动画取消了 这样
* 就能达到我们需要的效果了
*
* 做此题的思路是先做出无动画状态下的左后右滑图片能够相应的进行切换 接着添加上动画效果 然后在move事件中添加上
* 图片跟随的情况 接着判断第一张图片的右滑 和最后一张图片不能左滑的情况 这里建议多使用变量开关和if语句
* 不要使用一个if语句或者三木运算加上|| && !他们就行判断 不然容易晕
*
*/
class mySwiper {
constructor(opt) {
this.el = document.querySelector(opt.el); //盛放轮播最外层盒子
this.index = 0;
this.init()
}
init() {
this.touchEvent();
}
touchEvent() {
this.el.addEventListener("touchstart", Touch);
this.el.addEventListener("touchmove", Touch);
this.el.addEventListener("touchend", Touch);
let that = this;
let ul = this.el.querySelector("ul"); function Touch(e) {
switch (e.type) {
case "touchstart":
this.start = {
x: e.touches[0].clientX,
y: e.touches[0].clientY
}
// this.end = {
// x: 0,
// y: 0
// }
break;
case "touchmove":
this.end = {
x: e.touches[0].clientX,
y: e.touches[0].clientY
}
//在手指滑动的滑动距离赋值给这个图片滑动的距离 换句话说也是这个ul移动的距离
let flag1=false;
let flag2=false;
if(that.index==0){//在下标为1的时候切往右滑动的时候是不能让图片跟着移动的
//console.log((this.end.x-this.start.x)>0,"-----我在下标为0的时候滑动的方向")
if((this.end.x-this.start.x)>0){
flag1=true;
}
}
//同理 在下标为最后一个的时候切往左滑的是不能让图片移动的
//console.log((that.el.children),"----我在下标为最后一张")
if(that.index==(ul.children.length - 1)){
if((this.end.x-this.start.x)<0){
flag2=true;
}
}
let flag3=true;//第三个开关控制图片是不是能移动
//console.log(flag2)
if(flag1){
flag3=false;
}
if(flag2){
flag3=false;
}
if(flag3){
ul.style.transition = `top 1s linear`;
ul.style.left = `${-that.index*(that.el.offsetWidth)+(this.end.x-this.start.x)}px`;
}
break;
case "touchend":
if (this.end) {
if (this.end.y - this.start.y < 20) {
//在鼠标抬起的瞬间让left值为当前页所在的位置;
//再抬起的时候不要判断x轴方向 把其放在移动函数中进行判断
ul.style.transition = `all 1s linear`;
ul.style.left = `${-that.index*(that.el.offsetWidth)}px`;
that.move(this.end.x - this.start.x);
}
}
}
}
}
move(l) {
//l 是开始落下的位置和抬起的位置之间的差
let ul = this.el.querySelector("ul");
let w = this.el.offsetWidth;
console.log("滑动的距离太短 我还不能移动喽")
if (l < 0 && Math.abs(l) >= w / 3) { //如果l是负数 证明是在像右滑动 如果绝对值还大于一半的话就让其划过去
this.index++;
if (this.index >= ul.children.length - 1) {
this.index = ul.children.length - 1
}
console.log(this.index, "-------左滑");
ul.style.transition = `all 1s linear`;
ul.style.left = -this.index * w + "px"
//ul.style.transform = `translateX(${-this.index*w}px)`;
} if (l > w / 3) { //如果想左滑动的时候大于盒子的一半的话就让其把这个图片划过去 this.index--;
if (this.index < 0) {
this.index = 0;
}
console.log(this.index, "-------右滑")
ul.style.left = -this.index * w + "px";
ul.style.transition = `all 1s linear`;
// ul.style.transform = `translateX(${-this.index*w}px)`;
} }
}

原生JS实现移动端的轮播效果的更多相关文章

  1. 移动端图片轮播效果:depth模式总结

    最近公司app改版首页增加了一处轮播图效果,但是跟普通的轮播效果不同,是类似于下图的样式,找了一些兼容移动端的插件以及jQuery源码,总结一下使用心得: 1:jquery源码:缺点是在手机端的滑动很 ...

  2. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  3. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  4. 原生js实现一个简单的轮播图

    想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...

  5. 原生js一行代码实现简易轮播图

    这是一个简易的js无限循环轮播图,只用了一行js代码就实现了无限循环,记录一下三目运算符的伟大! <!DOCTYPE html><html lang="en"&g ...

  6. 原生JS实现淘宝无缝轮播

    <!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content=& ...

  7. js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  8. CSS3图片轮播效果

    原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...

  9. Omi-touch实战 移动端图片轮播组件的封装

    pc端的轮播,移动端的轮播都很常见.一年前,我还为手机端没有左滑,右滑事件从而封装了一个swipe库,可以自定义超过多少滑动时间就不触发,也可以设置滑动多少距离才触发,这一个功能的代码就达到400多行 ...

随机推荐

  1. ftp服务配置文件记录

    因为南京的客户死活要ftp服务而不是sftp,所以我作手用vsftp作为服务器,尝试在windows ftp软件登录进去,特记录vsftp的用法. 配置文件在/etc/vsftpd.conf 有如下代 ...

  2. oracle pl/sql split函数

    在软件开发过程中程序员经常会遇到字符串的拼接和拆分工作. 以java开发为例: 前台传入字符串拼接形式的一个JSON数据,如:"1001,1002,1003",这可能代表了一组序号 ...

  3. 项目搭建系列之一:使用Maven搭建SpringMVC项目

    约定电脑都安装了eclipse,且已配置好Maven以及eclipse插件. 1.Eclipse 2.maven 3.Eclipse 需要安装maven插件.url:maven - http://do ...

  4. 学习OpenCV——Kalman滤波

    背景: 卡尔曼滤波是一种高效率的递归滤波器(自回归滤波器), 它能够从一系列的不完全及包含噪声的测量中,估计动态系统的状态.卡尔曼滤波的一个典型实例是从一组有限的,包含噪声的,对物体位置的观察序列(可 ...

  5. JSP和Servlet的区别。

    1.jsp经编译后就变成了Servlet.(JSP的本质就是Servlet,JVM只能识别java的类,不能识别JSP的代码,Web容器将JSP的代码编译成JVM能够识别的java类)2.jsp更擅长 ...

  6. ASP.NET Web API下的HttpController激活:程序集的解析

    ASP.NET Web API下的HttpController激活:程序集的解析 HttpController的激活是由处于消息处理管道尾端的HttpRoutingDispatcher来完成的,具体来 ...

  7. [编织消息框架][网络IO模型]NIO(select and poll)

    上面测试论证系统内核在read data时会阻塞,如果我们在把第一个阶段解决掉那么性能就会提高 NIO 编程 JDK 1.4中的java.nio.*包中引入新的Java I/O库,其目的是提高速度.实 ...

  8. 【Rice】Cultivar versus Variety

    From Cindy Haynes, Department of Horticulture   As a horticulturist, it is important that I use the ...

  9. Django REST framework 第四章 Authentication

    到目前为止,撰写的API没有任何限制关于谁能更新.删除snippet. 我们更想要一些高级行为来确保: 1.代码段总是跟创建者有关联 2.只要认证通过的用户才能创建 3.只有创建者有权限更新或者删除 ...

  10. javascript,移动划过超链接鼠标变手型

    用css控制鼠标样式的语法如下:<span style="cursor:*">文本或其它页面元素</span>把 * 换成如下15个效果的一种: 下面是对这 ...