思路

　　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. Python多线程使用和注意事项

    多线程   基本实现: 第一种,函数方式 # -*- coding:utf-8 -*- import thread import time     def print_time(threadName, ...

  2. [Swift-2019力扣杯春季初赛]3. 最小化舍入误差以满足目标

    给定一系列价格 [p1,p2...,pn] 和一个目标 target,将每个价格 pi 舍入为 Roundi(pi) 以使得舍入数组 [Round1(p1),Round2(p2)...,Roundn( ...

  3. Ubuntu 18.04搭建Git服务器

    学习链接:博客园.廖雪峰 一 前言 前面已经贴了两个链接,为什么还要再写一篇呢,因为可能由于个人能力问题,我觉得上面两篇写的都有点简略,有些地方不太好理解,并不能一次性成功搭建,所以想根据自己踩过的坑 ...

  4. (转)Db2 数据库常见堵塞问题分析和处理

    原文:https://www.ibm.com/developerworks/cn/analytics/library/ba-lo-db2-common-blocking-problem-analyze ...

  5. java多线程（2）---生命周期、线程通讯

    java生命周期.线程通讯 一.生命周期 有关线程生命周期就要看下面这张图,围绕这张图讲解它的方法的含义,和不同方法间的区别.    1.yield()方法 yield()让当前正在运行的线程回到就绪 ...

  6. mysql 开发进阶篇系列 42 逻辑备份与恢复(mysqldump 的完全恢复)

    一.概述 在作何数据库里,备份与恢复都是非常重要的.好的备份方法和备份策略将会使得数据库中的数据更加高效和安全.对于DBA来说,进行备份或恢复操作时要考虑的因素大概有如下: (1) 确定要备份的表的存 ...

  7. Android--Loaders

    前言 Loaders,装载机,适用于Android3.0以及更高的版本,它提供了一套在UI的主线程中异步加载数据的框架.使用Loaders可以非常简单的在Activity或者Fragment中异步加载 ...

  8. Android Studio下HierarchyViewer的使用

    什么是HierarchyViewer Hierarchy Viewer是随AndroidSDK发布的工具,位置在tools文件夹下,名为hierarchyviewer.bat.它是Android自带的 ...

  9. Activity的生命周期函数

    前言: 上一篇文章写了关于Activity生命周期和生命周期状态的介绍,这一篇文章给大家聊聊Activity生命周期函数. 主Activity: 应用程序的入口一般都是桌面应用程序图标,用户点击应用图 ...

  10. 编写高质量代码改善java程序的151个建议——[110-117]异常及Web项目中异常处理

    原创地址:http://www.cnblogs.com/Alandre/(泥沙砖瓦浆木匠),需要转载的,保留下! 文章宗旨:Talk is cheap show me the code. 大成若缺,其 ...