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

 <!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. 深入浅出Node.js (3) - 异步I/O

    3.1 为什么要异步I/O 3.1.1 用户体验 3.1.2 资源分配 3.2 异步I/O实现现状 3.2.1 异步I/O与非阻塞I/O 3.2.2 理想的非阻塞异步I/O 3.2.3 现实的异步I/ ...

  2. cf486B OR in Matrix

    B. OR in Matrix time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  3. NYOJ130 同样的雪花 【Hash】

    同样的雪花 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描写叙述 You may have heard that no two snowflakes are alike. ...

  4. 程序猿都是project师吗？

    全部的程序猿都是project师吗?当然不是.project师是必修课.程序猿则是选修.project师为自己的事业工作,而程序猿做他们喜欢做的事情.project是实实在在的,编程是抽象的. 为了吸 ...

  5. ibatisnet框架使用说明

    ibatis配置文件主要包括三个 sqlmap.config,providers.config,database.config,注意所有文件生成操作都为嵌入的资源.其中database.config主 ...

  6. html进阶css（1）

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  7. Global.asax使用1

    Application_start: 1.第一个访问网站的用户会触发该方法.(针对访问的是asp.net应用程序的类,及ashx,aspx等才会触发) 2. 通常会在该方法里定义一些系统变量,如聊天室 ...

  8. C# 执行存储过程

    SqlParameter[] paras = BuildParas(id, time, name); bool bRet = ExcuteProcedure(“数据库连接字符串”, "存储过 ...

  9. nginx搭建flv、mp4流媒体服务

    1.安装pcre-8.33.tar.bz2 #tar -xvf 1.pcre-8.33.tar.bz2 #cd pcre-8.33/ #./configure #make && mak ...

  10. C++重难点知识

    1.顶层const和底层const const int a=10; int b=5; const int *p1=&a; int (*const)p2=&b; p1是顶层const,表 ...