思路

　　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. 7.侧滑、ViewDragHelper、属性动画

    实现这样的效果: ## 侧滑面板(对ViewGroup的自定义)* 应用场景: 扩展主面板的功能* 功能实现: > 1. ViewDragHelper: Google2013年IO大会提出的, ...

  2. Android开发技术周报176学习记录

    Android开发技术周报176学习记录 教程 当 OkHttp 遇上 Http 2.0 http://fucknmb.com/2018/04/16/%E5%BD%93OkHttp%E9%81%87% ...

  3. Python开发端口扫描器

    首先是最常用的端口扫描器: 虽说有nmap等强大的工具,不过如果由于条件限制无法安装Nmap呢? 我这个脚本写的比较简单,默认扫描1-65535全部的端口 实际的话,可以根据需要自己修改脚本来实现定制 ...

  4. NumPy 学习笔记（一）

    NumPy: 1.NumPy 是一个功能强大的第三方库(需要自己安装),主要用于对多维数组执行计算:   它提供了大量的库函数和操作,可以帮助程序员更轻松地进行数值计算 2.可以和另外两个第三方库 S ...

  5. hbaes之createTable执行流程

    hbase的客户端代码并不想hive一样用java编写,shell调用,而是使用ruby编写. 在admin.rb文件中方法create,其中接受两个参数,其中第二个参数类型为变长参数. 而在crea ...

  6. HP服务器设置iLO

    HP服务器设置iLO步凑 1.开机出现界面—按下F11进入Boot Menu: 2.选择Generic USB Boot回车: 3.选择System Configuration回车: 4.选择iLO ...

  7. 前端测试框架Jest系列教程 -- Mock Functions（模拟器）

    写在前面: 在写单元测试的时候有一个最重要的步骤就是Mock,我们通常会根据接口来Mock接口的实现,比如你要测试某个class中的某个方法,而这个方法又依赖了外部的一些接口的实现,从单元测试的角度来 ...

  8. bash 的配置文件加载顺序

    bash配置文件的加载顺序和登陆方式有关,下面先介绍下登陆方式. 1 登陆方式有2种 登陆式SHELL: su - oracle    su -l oracle 正常从终端登陆 非登录式SHELL: ...

  9. MFC控件编程之 按钮编辑框.静态文本的使用,以及访问控件的七种方法.

    MFC控件编程之 按钮编辑框.静态文本的使用以及访问控件的七种方法. 一丶按钮.静态文本的通用属性. 他们都有一个属性.就是可以输入标题内容.以及可以自定义控件ID. 创建一个MFC Dlg对话框. ...

  10. MFC原理第六讲.消息传递

    ---恢复内容开始--- MFC原理第六讲.消息传递 一丶简介 通过上一讲我们的消息映射表.我们得知. 消息映射表 会保存父类的MessageMap 以及自己当前的消息结构体数组. 消息传递是一层一层 ...