思路

　　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. 5个相见恨晚的Linux命令

    阅读本文大概需要 2.4 分钟. 作者 | 李火清 转载自[CU技术社区] 编者按:说到Linux命令相信大家都不陌生,就连前端现在也要经常在 terminal 敲一些 node,gulp等命令,本文 ...

  2. 第63节:Java中的Spring MVC简介笔记

    前言 感谢! 承蒙关照~ Java中的Spring MVC简介笔记 MVC简介 Spring MVC 基本概念 Spring MVC 项目搭建 maven 使用Spring MVC进行开发 实现数据绑 ...

  3. iframe简单框架

    <iframe width='738' height='523' class='preview-iframe' scrolling='no' frameborder='0' src='http: ...

  4. java,让debug出色

    虽然我们不喜欢bug,但是bug永远都存在.虽然我们牛逼,但是仍然有不知道的东西,解决不了的问题.so,还得借助工具,让咱效率提起来扛扛的.解决的问题如是:由于某种原因,其他系统发送的mq,我这边说没 ...

  5. 数组转换为List(Arrays.asList)后add或remove出现UnsupportedOperationException

    Java中,可以使用Arrays.asList(T... a)方法来把一个数组转换为List,返回一个受指定数组支持的固定大小(注意是固定大小)的列表.此方法同 Collection.toArray( ...

  6. (转)db2top详解

    原文:https://blog.csdn.net/lyjiau/article/details/47804001 https://www.ibm.com/support/knowledgecenter ...

  7. Redis主从+KeepAlived实现高可用

    Redis是我们当下比较流行使用的非关系数据库,可支持多样化的数据类型,多线程高并发支持,redis运行在内存拥有更快的读写.因为redis的表现如此出色,如何能保障redis在运行中能够应对宕机故障 ...

  8. Linux安全配置

    注释掉系统不需要的用户和用户组 vi /etc/passwd #adm:x:3:4:adm:/var/adm:/sbin/nologin #lp:x:4:7:lp:/var/spool/lpd:/sb ...

  9. 自动化测试 | UI Automator 进阶指南

    UI Automator 相关介绍: 跨应用的用户界面自动化测试 包含在 AndroidX Test(https://developer.android.com/training/testing) 中 ...

  10. Win32文件系统编程

    Win32文件系统编程 一丶了解什么是文件系统 文件系统是抽象的.是windows在软件层面提供的一层虚拟的数据结构. 文件系统分为NTFS 跟 FAT32. 具体看看两者的区别吧. 磁盘分区容量. ...