直接上代码了 仔细看看例子就会明白 简单实用

 <!DOCTYPE HTML>

 <html>

 <head>

     <meta charset="utf-8">

     <title>水平切换 demo</title>

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

     <meta name="author" content="@my_programmer">

     <style type="text/css">

             /*重置{*/

         body, div, span {

             padding: 0;

             margin: 0;

         }

             /*}重置*/

         .all {

             width: 602px;

             height: 302px;

             margin: 100px auto 0;

             border: 2px green solid;

             overflow: hidden;

         }

         .inner {

             width: 4816px;

             height: 302px;

             border: solid 1px red;

         }

         .inner>div {

             width: 600px;

             height: 300px;

             border: 1px blue solid;

             float: left;

             font-size: 80px;

             font-weight: bold;

             text-align: center;

             line-height: 300px;

         }

         .pointer {

             width: 256px;

             margin: 20px auto;

             overflow: hidden;

         }

         .pointer>span {

             float: left;

             width: 20px;

             height: 20px;

             border-radius: 50%;

             margin: 0 5px;

             border: 1px #000 solid;

         }

         .color {

             background: #ff0;

         }

         .test{

             width: 7px;

 height: 7px;

 display: inline-block;

 position: absolute;

 right: 5px;

 bottom: 20px;

 border-bottom: 3px solid #666;

 border-right: 3px solid #666;

 -webkit-transform: rotate(45deg);

         }

     </style>

 </head>

 <body>

 <div class="all">

     <div class="inner">

         <div>1</div>

         <div>2</div>

         <div>3</div>

         <div>4</div>

         <div>5</div>

         <div>6</div>

         <div>7</div>

         <div>8</div>

     </div>

 </div>

 <div class="pointer" id="pointer">

     <span class="color"></span>

     <span></span>

     <span></span>

     <span></span>

     <span></span>

     <span></span>

     <span></span>

     <span></span>

 </div>

 <div style="margin:0px auto;width:80px;" class="go">

     <input type="button" value="go" style="width:50px;height:30px;"/>

 </div>

 <span class="test"></span>

 <script type="text/javascript" src="js/jquery-1.7.1.js"></script>

 <script type="text/javascript" src="js/Flipsnap%20.js"></script>

 <!-- 下面为了省事，例子4、6、7 使用了jquery-->

 <script type="text/javascript">

     /*1.简单水平拖动*/

     // Flipsnap('.inner');    //移动次数为子元素个数减一

     /*2.设定每次移动的距离*/

     //    Flipsnap('.inner',{

     //    distance:602    //每次移动的距离，移动次数为子元素个数减一；注意：此处不能有分号,可以有逗号

     //    });

     /*3.设定每次移动的距离,和，最多移动的次数*/

     //    Flipsnap('.inner',{

     //    distance:602,

     //    maxPoint:7        //最多移动的次数

     //    });

     /*4.绑定事件*/

     //    var $pointer = $('.pointer span');

     //    var flipsnap = Flipsnap('.inner', {distance:602});

         //    flipsnap.element.addEventListener('fsmoveend', function() {

     //        //filter 为jquery的筛选器，筛选出与指定表达式匹配的元素集合

     //        $pointer.filter('.color').removeClass('color');

     //        $pointer.eq(flipsnap.currentPoint).addClass('color');

     //    }, false);

     /*5.refresh 刷新*/

     //var flipsnap=Flipsnap('.inner');

     //flipsnap.refresh();        //刷新当前页面，当屏幕切换时，此代码就派上用场了

     /*6.移动到指定位置,鼠标不可拖动 */

     /*var flipsnap = Flipsnap('.inner', {

      distance: 602,

      disableTouch: true     //true 鼠标不可拖动;  false 鼠标可拖动

      });

      $('.go').click(function() {

      //flipsnap.moveToPoint(3);    //移动到指定位置,第n+1个

      flipsnap.toNext();    //移动到下一元素

      //flipsnap.toPrev();    //移动到上一元素

      });*/

     /*7.next, prev*/

     var spanobj = $(".pointer span");

     var flipsnap = Flipsnap('.inner', {

         distance: 602,

         disableTouch: true     //true 鼠标不可拖动;  false 鼠标可拖动

     });

     flipsnap.element.addEventListener('fsmoveend', function() {

         spanobj.filter('.color').removeClass('color')

         spanobj.eq(flipsnap.currentPoint).addClass('color');

     });

     $('.go').click(function() {

         setInterval(function() {

            if(flipsnap.hasNext()){

                 flipsnap.toNext();

            }else{

               flipsnap.moveToPoint(0)

            }

         }, 1000)

         // flipsnap.toPrev();    //移动到上一元素

     });

 </script>

 </body>

 </html>

Wap touch flispan demo的更多相关文章

  1. [转]初探 PhoneGap 框架在 Android 上的表现

    原文地址:http://topmanopensource.iteye.com/blog/1486929 phonegap是由温哥华的一家小公司研发的多平台的移动开发框架,支持流行的大多数移动设备(iP ...

  2. 与众不同 windows phone (25) - Input（输入）之捕获 UIElement 之外的触控操作, Silverlight 方式捕获手势操作, XNA 方式捕获手势操作, 多点触控

    原文:与众不同 windows phone (25) - Input(输入)之捕获 UIElement 之外的触控操作, Silverlight 方式捕获手势操作, XNA 方式捕获手势操作, 多点触 ...

  3. NFS、FTP介绍

    第二十五课 NFS.FTP介绍 目录 一. NFS介绍 二.NFS服务端安装配置 三.NFS配置选项 四.exportfs命令 五.NFS客户端问题 六.FTP介绍 七.使用vsftpd搭建ftp 八 ...

  4. 自己定义ViewGroup实现仿淘宝的商品详情页

    近期公司在新版本号上有一个须要. 要在首页加入一个滑动效果, 详细就是仿照X宝的商品详情页, 拉到页面底部时有一个粘滞效果, 例如以下图 X东的商品详情页,假设用户继续向上拉的话就进入商品图文描写叙述 ...

  5. docker数据卷(转)

    原文地址:http://www.cnblogs.com/zydev/p/5809616.html Docker-数据卷和数据容器卷 容器中管理数据主要有两种方式: 数据卷(Data Volumes) ...

  6. LR11.5 安卓模拟器性能测试

    LR11.5 安卓模拟器性能测试 上一篇 / 下一篇  2013-07-04 08:07:19 / 个人分类:相关知识 查看( 1172 ) / 评论( 1 ) / 评分( 0 / 0 ) 1.首先下 ...

  7. In a Web Application and Mobile (hybrid), how to know which this platform running?

    needed depending on the platform to change the CSS to suit the size of the font. for example the DbG ...

  8. jquery手指触摸滑动放大图片的方法(比较靠谱的方法)

    jquery手指触摸滑动放大图片的方法(比较靠谱的方法) <pre><!DOCTYPE html><html lang="zh-cn">< ...

  9. PhoneGap架构基础及工作原理介绍

    转自:http://mobile.51cto.com/others-308545.htm 本篇文章从PhoneGap由来.功能以及工作原理,力争由浅入深介绍PhoneGap框架.   为什么需要Pho ...

随机推荐

  1. PhpForm表单验证

    <!DOCTYPE HTML> <html> <meta http-equiv="Content-Type" content="text/h ...

  2. Maven自定义Archetype

    Maven提供了archetype帮助我们快速构建项目骨架,很便捷.但是,中央仓库中的archetype版本过于陈旧,构建好项目后,需要修改很多信息,甚是麻烦,那么如何自定义个archetype就显得 ...

  3. 【CF 549G Happy Line】排序

    题目链接:http://codeforces.com/problemset/problem/549/G 题意:给定一个n个元素的整数序列a[], 任意时刻对于任一对相邻元素a[i-1]. a[i],若 ...

  4. 《招聘一个靠谱的iOS》面试题参考答案（上）

    说明:面试题来源是微博@我就叫Sunny怎么了的这篇博文:<招聘一个靠谱的 iOS>,其中共55题,除第一题为纠错题外,其他54道均为简答题. 博文中给出了高质量的面试题,但是未给出答案, ...

  5. xcode6和ios 8 百度无法定位解决

    . @interface里: CLLocationManager *locationManager; . 初始化: locationManager = [[CLLocationManager allo ...

  6. 对c#剪切板Clipboard占用的问题一点解决方法

    以前在百度写的文档,转移到此处 前几天做一个程序,其中有一个剪切板的操作,具体代码: Clipboard.SetText(“ABC”); 来完成一个复制字符串的操作. 自己调试通过,完全正常,然后就交 ...

  7. OLEDB简介

    OLE DB(OLEDB)是微软的战略性的通向不同的数据源的低级应用程序接口.OLE DB不仅包括微软资助的标准数据接口开放数据库连通性(ODBC)的结构化查询语言(SQL)能力,还具有面向其他非SQ ...

  8. vim 快捷键大全

    一.移动光标 1.左移h.右移l.下移j.上移k 2.向下翻页ctrl + f,向上翻页ctrl + b 3.向下翻半页ctrl + d,向上翻半页ctrl + u 4.移动到行尾$,移动到行首0(数 ...

  9. Unity 启动画面淡入淡出

    前几天在玩我叫MT 2游戏的时候发现打开他们应用的时候发现他们Logo淡入淡出的效果做的挺好的,例如第一张是运营商腾讯的logo第二张是他们公司的游戏logo.我们也来模仿一下: 第一张图片:运营商的 ...

  10. [Python学习笔记][第六章Python面向对象程序设计]

    1月29日学习内容 Python面向对象程序设计 类的定义与使用 类定义语法 使用class关键词 class Car: def infor(self): print("This is ca ...