思路

　　1.用ul ,li 来装载滑动的图片，超出部分隐藏

　　2.滑动是通过改变ul的位置来实现

布局

模块

　　1: 根据li元素个数去设置ul的宽度

　　　　1.1 获取ul元素

　　　　1.2 获取li元素的个数

　　　　1.3 设置ul元素的宽度

　　2: ul实现拖拽移动功能

　　　　Ul元素移动的距离 = 鼠标移动横坐标只差

　　　　Ul元素的新位置 = Ul的位置标 + Ul元素移动的距离

　　　　Ul元素可以通过translateX 来进行动画

　　　　2.1: 获取ul元素的旧位置(触碰ul元素时的translateX值)

　　　　2.2: 获取手指触碰的坐标x1

　　　　2.3: 获取手指移动的坐标x2

　　　　2.4: 计算Ul的新位置

　　　　2.5: 设置Ul的位置

<!doctype html>

<html lang="en">

	<head>

		<meta charset="UTF-8">

		<meta name="Keywords" content="">

		<meta name="Description" content="">

		<title>手机滑动插件swiper</title>

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            body,

            .content{

                display: flex;

                align-items: center;

                width: 100vw;

                height: 100vh;

            }

            .swiper{

                width: 100%;

                height: 100%;

                overflow: hidden;

            }

            .swiper ul{

                width: 300%;

                height: 100%;

                list-style: none;

            }

            .swiper ul li{

                display: flex;

                justify-content: center;

                align-items: center;

                float: left;

                width: calc( 100% / 3);

                height: 100%;

            }

            .swiper ul li img{

                display: block;

                width: 60%;

                height: 60%;

            }

		</style>

	</head>

	<body>

        <div class="content">

            <div class="swiper">

                <ul>

                    <li><img src="data:images/01.jpg" alt=""></li>

                    <li><img src="data:images/02.jpg" alt=""></li>

                    <li><img src="data:images/03.jpg" alt=""></li>

                </ul>

            </div>

        </div>

	</body>

	<script>

        var data = {

            oUl : document.querySelector('ul'),

            aLi : document.querySelectorAll('li'),

            time : '0.5s'

        }

        swiper(data);

        function swiper(data){

            data.oUl.style.width = data.aLi.length+'00%';

            for (var index = 0 ; index < data.aLi.length ; index++) {

                data.aLi[index].style.width = 100/(data.aLi.length)+'%';

            }

            data.oUl.addEventListener('touchstart',touch);   //当手指触摸屏幕时候触发

            data.oUl.addEventListener('touchmove',touch);    //当手指在屏幕上滑动的时候连续地触发

            data.oUl.addEventListener('touchend',touch);     //当手指从屏幕上离开的时候触发

            data.startX = 0; //移动存放初始位置

            data.oUl.transform = {}; //存放transform的变化值

        };

        function touch(ev){

            ev = ev || window.event ;   //获取手指事件

            switch (ev.type) {

                case 'touchstart':

                    data.startX = cssTransform(data.oUl,'translateX') || 0 ;

                    x1 = ev.changedTouches[0].pageX;

                    data.oUl.style.transition = '0s';

                    break;

                case 'touchmove':

                    var x2 = ev.changedTouches[0].pageX;

                    var nowX = data.startX + x2 - x1;

                    cssTransform(data.oUl,'translateX',nowX);

                    break;

                case 'touchend':    //松开时 图片是拉取还是回撤

                    var offset = data.oUl.transform['translateX'];

                    offset = Math.min( 0 , offset );

                    offset = Math.max( -(data.aLi.length-1) * data.aLi[0].offsetWidth , offset );

                    var num = Math.round( - offset / data.aLi[0].offsetWidth );

                    cssTransform(data.oUl,'translateX',-num*data.aLi[0].offsetWidth);

                    data.oUl.style.transition = data.time;

                    break;

            }

        }

        /*****

        *@paran:设置或获取一个元素的transform的值

        *@obj:待操作的元素

        *@attr:待操作的属性

        *@var:待设置的值

        *传两个参数是获值，三个参数是这是值

        **/

        function cssTransform(obj , attr , val){

            switch (arguments.length) { //传参的个数

                case 3:

                    obj.transform[attr] = val;

                    var str = '' ;  //待设置的属性值,拼接而成

                    for (var key in obj.transform) {

                        switch (key) {

                            case 'translate':

                            case 'translateX':

                            case 'translateY':

                            case 'translateZ':

                                str += key+'('+obj.transform[key]+'px)';

                        }

                    }

                    obj.style.transform = str;

                    break;

                case 2:

                    var val = obj.transform[attr];

                    if ( typeof val === 'undefined' ) {

                        val = 0;

                    }

                    return val;

                    break;

            }

        };

	</script>

</html>

　　

[JavaScript]手机滑动图片的更多相关文章

  1. [js开源组件开发]js轮播图片支持手机滑动切换

    js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-ima ...

  2. 手机触屏滑动图片切换插件swiper.js

    今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  3. 【javascript/css】Javascript+Css实现图片滑动浏览效果

    今天用js+css来做一个能够左右滑动的图片浏览效果. 首先写一个结构,包括需要浏览的两张图,以及能够点击来滑动图片的两个按钮. <!DOCTYPE html> <html> ...

  4. 使用iScroll和photoswipe写手机浏览图片的插件的几点经验

    首先,当我知道我得到一个任务需要写一个在手机上能浏览图片的插件时,我第一想到了iScroll.它的左右滑动,上下滑动的效果在安卓手机上也能让用户有良好的体验,自己写也能方便控制. 我的需求是,插件要能 ...

  5. js鼠标滑动图片显示隐藏效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. wpf 模拟3D效果(和手机浏览图片效果相似)（附源码）

    原文 wpf 模拟3D效果(和手机浏览图片效果相似)(附源码) pf的3D是一个很有意思的东西,类似于ps的效果,类似于电影动画的效果,因为动画的效果,(对于3D基础的摄像机,光源,之类不介绍,对于依 ...

  7. 移动端 H5 拍照 从手机选择图片，移动端预览，图片压缩，图片预览，再上传服务器

    前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...

  8. react使用ant design pro时的滑动图片组件

    react的滑动图片验证,是基于https://segmentfault.com/a/1190000018309458?utm_source=tag-newest做的修改,改动的主要有以下几点: 1. ...

  9. 用javascript协助导入图片

    用javascript协助导入图片 需求 先说说需求.春节回家见爸妈,老爸迷上了摄影.他把平时的照片都上传到了 成都图片网, 这个成都图片网专门有一个 "快拍成都" 的版块,用于大 ...

随机推荐

  1. java小白之面向对象

    面向对象 面相对象(oop)和面向过程(pop)通常一起说,一个是更加关注过程,事力亲为,而面向对象更加注重结果,所以说,面向对象更加是一种思想,它贯穿整个java,以上帝视角来看整个功能需求,简化开 ...

  2. 小程序上传wx.uploadFile - 小程序请假

    小程序上传wx.uploadFile UploadTask wx.uploadFile(Object object) 将本地资源上传到服务器.客户端发起一个 HTTPS POST 请求,其中 cont ...

  3. Kali学习笔记21：缓冲区溢出实验（漏洞发现）

    上一篇文章,我已经做好了缓冲区溢出实验的准备工作: https://www.cnblogs.com/xuyiqing/p/9835561.html 下面就是Kali虚拟机对缓冲区溢出的测试: 已经知道 ...

  4. Kali学习笔记12：服务扫描

    关于什么是服务扫描不多介绍,通俗来看: 我已经扫描到目标机器某个端口开放,接下来我需要知道开放这个端口的是什么应用 情景: 我的Kali机器IP地址:192.168.22.130 我要扫描的Metas ...

  5. 深入理解java反射原理

    反射是java的一个特性,这一特性也使得它给了广大的第三方框架和开发过者很大的想像空间. 通过反射,java可以动态的加载未知的外部配置对象,临时生成字节码进行加载使用,从而使代码更灵活!可以极大地提 ...

  6. 导出到word

    导出到excel功能会常做,但是导出到word功能很少做,项目遇到,在这里做一下标记. 导出到excel比较容易,excel都有固定格式也模板,但是word需要自己写模板,这里用了freemarker ...

  7. RISC-V平台的汇编指令解析

     csrr    a0, 0xF14 //把0xF14的值读入到a0中  andi    a1, a0, 0x1f //把a0 和0x1F按位与运算后存储到a1中 srli    a0, a0, 5 ...

  8. [原创]K8Cscan插件之Weblogic漏洞扫描&通用GetShell Exploit

    [原创]K8 Cscan 大型内网渗透自定义扫描器 https://www.cnblogs.com/k8gege/p/10519321.html Cscan简介:何为自定义扫描器?其实也是插件化,但C ...

  9. 改造kindeditor支持asp.net core mvc上传文件

    kindtor默认使用的上传方法是使用目录下面的一般处理程序upload_json.ashx,暂时还不支持asp.net core下的文件上传,下面放出的自定义处理上传文件的接口方法. 自定义接收上传 ...

  10. IdentityServer4（8）- 使用密码认证方式控制API访问（资源所有者密码授权模式）

    一.前言 本文已经更新到 .NET Core 2.2 OAuth 2.0 资源所有者密码模式允许客户端向令牌服务发送用户名和密码,并获取代表该用户的访问令牌. 除了通过无法浏览器进行交互的应用程序之外 ...