因为公司需要自定义两个轮播图联动，又不想引入第三方库，所以自己研究了下。

下面只是一个简单的轮播图，由此再拓展一下即可实现两个轮播图联动。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Document</title>

</head>

<style>

    html{height:100%;}

    body{width: 100%;height:100%;margin:0;overflow: hidden;}

    .wrap{position: relative;overflow: hidden;}

    .box{position: absolute;list-style: none;left:0;top:0;padding:0;margin:0;}

    .box li{float:left;}

    .box{

        position: relative;

        height: 200px;

        width: 100%;

        top: 0;

        bottom: 0;

        left: 0;

        right: 0;

        background: red;

        transition: left 0.5s;

        -moz-transition: left 0.5s;    /* Firefox 4 */

        -webkit-transition: left 0.5s;    /* Safari 和 Chrome */

        -o-transition: left 0.5s;    /* Opera */

    }

    .box1{

        height: 200px;

    }

    .box2{

        background: yellow;

    }

    .box3{

        background: yellowgreen;

    }

    .box4{

        background: orange;

    }

    .box5{

        background: cyan;

    }

</style>

<body>

<div class="wrap">

    <ul class="box">

        <li><div class="box1 box2">11111</div></li>

        <li><div class="box1 box3">2222</div></li>

        <li><div class="box1 box4">3333</div></li>

        <li><div class="box1 box5">4444</div></li>

    </ul>

</div>

<script>

  // 获取dom对象

  var aLi = document.querySelectorAll('.box li');

  var box = document.querySelector('.box');

  var wrap = document.querySelector('.wrap');

  var aLiWidth = box.offsetWidth;

  var disX = 0;   //滑动距离

  var currNum = 0;      //当前索引

  // 布局

  wrap.style.height = aLi[0].offsetHeight+'px';

  box.style.width = aLi.length*100+'%';

  aLi.forEach(function(item,index){

    item.style.width = aLiWidth+'px';

  })

  // 初始化手指坐标点

  var startPoint = 0;

  var startEle = 0;

  // 手指按下--获取手指位置和box的位置

  wrap.addEventListener('touchstart',function(e){

    startPoint = e.changedTouches[0].pageX;

    startEle = box.offsetLeft;

    console.log(startEle);

  });

  // 手指滑动

  wrap.addEventListener('touchmove',function(e){

    var currPoint = e.changedTouches[0].pageX;

    disX = currPoint-startPoint;

    var left = startEle+disX/2;

    box.style.transition = 'left 0s';

    box.style.left = left + 'px';

    // console.log(disX);   //手指滑动距离

  });

  //当手指抬起的时候，判断图片滚动离左右的距离

  wrap.addEventListener('touchend',function(e){

    var left = box.offsetLeft;

    // 判断正在滚动的图片的滚动距离和方向，以及是否是第一张或最后一张

    if(disX>100){   //向右滑动100px时

      currNum = Math.floor(-left/aLiWidth);

      currNum = currNum<=0 ? 0 : currNum;

    }else if(disX<-100){   //向左滑动100px时

      currNum = Math.floor(-left/aLiWidth)+1;

      currNum = currNum>=(aLi.length-1) ? aLi.length-1 : currNum;

    };

    box.style.transition = 'left 0.5s';

    box.style.left = -currNum*wrap.offsetWidth + 'px';

  })

</script>

</body>

</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
</head>
<style>
html{height:100%;}
body{width: 100%;height:100%;margin:;overflow: hidden;}
.wrap{position: relative;overflow: hidden;}
.box{position: absolute;list-style: none;left:;top:;padding:;margin:;}
.box li{float:left;}
.box{
position: relative;
height: 200px;
width: 100%;
top: ;
bottom: ;
left: ;
right: ;
background: red;
transition: left 0.5s;
-moz-transition: left 0.5s; /* Firefox 4 */
-webkit-transition: left 0.5s;  /* Safari 和 Chrome */
-o-transition: left 0.5s; /* Opera */
}
.box1{
height: 200px;
}
.box2{
background: yellow;
}
.box3{
background: yellowgreen;
}
.box4{
background: orange;
}
.box5{
background: cyan;
}
</style>
<body>
<div class="wrap">
<ul class="box">
<li><div class="box1 box2">11111</div></li>
<li><div class="box1 box3">2222</div></li>
<li><div class="box1 box4">3333</div></li>
<li><div class="box1 box5">4444</div></li>
</ul>
</div>
<script>
// 获取dom对象
var aLi = document.querySelectorAll('.box li');
var box = document.querySelector('.box');
var wrap = document.querySelector('.wrap');
var aLiWidth = box.offsetWidth;
 
var disX = ; //滑动距离
var currNum = ; //当前索引
 
// 布局
wrap.style.height = aLi[].offsetHeight+'px';
box.style.width = aLi.length*+'%';
aLi.forEach(function(item,index){
item.style.width = aLiWidth+'px';
})
// 初始化手指坐标点
var startPoint = ;
var startEle = ;
// 手指按下--获取手指位置和box的位置
wrap.addEventListener('touchstart',function(e){
startPoint = e.changedTouches[].pageX;
startEle = box.offsetLeft;
console.log(startEle);
});
// 手指滑动
wrap.addEventListener('touchmove',function(e){
var currPoint = e.changedTouches[].pageX;
disX = currPoint-startPoint;
var left = startEle+disX/;
box.style.transition = 'left 0s';
box.style.left = left + 'px';
// console.log(disX); //手指滑动距离
});
//当手指抬起的时候，判断图片滚动离左右的距离
wrap.addEventListener('touchend',function(e){
var left = box.offsetLeft;
// 判断正在滚动的图片的滚动距离和方向，以及是否是第一张或最后一张
if(disX>){ //向右滑动100px时
currNum = Math.floor(-left/aLiWidth);
currNum = currNum<= ? : currNum;
}else if(disX<-){ //向左滑动100px时
currNum = Math.floor(-left/aLiWidth)+;
currNum = currNum>=(aLi.length-) ? aLi.length- : currNum;
};
box.style.transition = 'left 0.5s';
box.style.left = -currNum*wrap.offsetWidth + 'px';
})
</script>
</body>
</html>

移动端滑动轮播，原生JS的更多相关文章

  1. 移动端lCalendar纯原生js日期时间选择器

    网上找过很多的移动端基于zepto或jquery的日期选择器,在实际产品中也用过一两种,觉得都不太尽如人意,后来果断选择了H5自己的日期input表单,觉得还可以,至少不用引用第三方插件了,性能也不错 ...

  2. 用jq实现移动端滑动轮播以及定时轮播效果

    Html的代码: <div class="carousel_img"> <div class="car_img" style="ba ...

  3. 原生js实现简单移动端轮播图

    最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...

  4. 告别组件之教你使用原生js和css写移动端轮播图

    在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...

  5. 原生JS实现移动端轮播图

    功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...

  6. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  7. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  8. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  9. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

随机推荐

  1. 点击刷新验证码所需要的onclick函数

    <img src="__APP__/Public/verify" onclick="this.src=this.src+'?'+Math.random()" ...

  2. 20190422 SQL SERVER 服务

    -- 数据库服务-- SQL Server(MSSQLSERVER)是必须要开启的,这个是数据库引擎服务,就像汽车的发动机一样-- SQL Server代理(MSSQLSERVER)是代理服务,比如你 ...

  3. 十、无事勿扰，有事通知（1）——NSNotification

    概述 很久很久以前,有一只菜鸟正在美滋滋的撸着他的嵌入式C代码.然而有一天,老板对菜鸟说:“别撸C了,从现在开始你就写swift开发ios了.”菜鸟一脸懵逼,但还是照做了. 又有一天,菜蛋谄媚的对菜鸟 ...

  4. 2018-2019-1 20189203《Linux内核原理与分析》第五周作业

    第一部分 课本学习 用户态.内核态和中断 1.内核态:处于高的执行级别下,代码可以执行特权指令,访问任意的物理地址,这时的CPU就对应内核态,对所有的指令包括特权指令都可以执行. 2.用户态:处于低的 ...

  5. android layout文件优化

    性能优化1--UI优化 1.使用系统为我们提供了几个抽象的标签①include:重用include中layout属性指定一个外部布局文件,通过该方式则不需要把这个布局文件在该代码中重复的写一遍了. 若 ...

  6. 自定义Markdown例子

    主题1 正文字体 粗体 正文行内代码 斜体 int a = 2 /*代码块*/ /*杨韬的学习备忘录*/ private void CheckCloseFigure() { if (needClose ...

  7. flask 在视图函数里操作数据库

    在视图函数里操作数据库 在视图函数里操作数据的方式和在python shell中的联系基本相同,只不过需要一些额外的工作.比如把查询结果作为参数 传入模板渲染出来,或是获取表单的字段值作为提交到数据库 ...

  8. 软件工程---UML理解

    1.依赖关系和关联关系 1.1依赖关系是调用关系,其又分为全局依赖.参数依赖.局部依赖 1.2关联关系是结构上的关系,按照关联的强弱又具体分为关联关系.聚合关系(整体和部分的组成关系.whole-pa ...

  9. ftp权限设置大全！！！

    1．登录和对匿名用户的设置write_enable=YES                         //是否对登录用户开启写权限.属全局性设置.默认NOlocal_enable=YES    ...

  10. ACM总结——2017区域赛网络赛总结

    从省赛回来至今4周,每周周末都在打网络赛,每次都是划水,总结下自己弱弱的ACM吧!划水水~~ 首先是新疆赛区,基本上都是图论相关的东西,全靠队友,自己翻水水,实力躺了5道. 然后是沈阳赛区,终于有点贡 ...