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

 <!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. 【转】Java基本数据类型

    原文网址:http://blog.csdn.net/bingduanlbd/article/details/27790287 Java语言是静态类型的(statical typed),也就是说所有变量 ...

  2. c++ 02

    一.堆内存的动态分配与释放 malloc/calloc/realloc/free new/delete:详见memory.cpp 1.通过new运算符分配单个变量 数据类型* 指针变量 = new 数 ...

  3. print带参数格式

    string_1 = "Camelot" string_2 = "place" print("float:%lf. int:%d string:%s. ...

  4. HDU 5418 Victor and World （Floyd + 状态压缩DP)

    题目大意:从起点 1 开始走遍所有的点,回到起点 1 ,求出所走的最短长度. 思路:首先利用 Floyed 求出任意两点之间的最短距离 dis[i][j].求出任意两点之间的最短距离后,运用动态规划. ...

  5. 【转载】视频编码（H264概述）

    一视频编码介绍 1.1 视频压缩编码的目标 1)保证压缩比例 2)保证恢复的质量 3)易实现,低成本,可靠性 1.2 压缩的出发点(可行性) 1)时间相关性 在一组视频序列中,相邻相邻两帧只有极少的不 ...

  6. ubuntu 14.04 下试用Sublime Text 3

    很多源代码都没有IDE支持的,尤其是开源的源代码.从github上下载的,很多也不用IDE.包括我自己公司的代码,基本都是脚本,也不用IDE.通常情况下,都是用notepad++.UE之类的文本编辑器 ...

  7. JavaScript 基础一

    内部: <Script Language="JavaScript" type="text/javascript"> JavaScript代码 < ...

  8. mycat实例（1）

    2016二月 22 置原 MyCat - 使用篇(1) 分类:数据库分库分表(Mycat等) (1126) (1) 数据库路由中间件MyCat - 使用篇(1) 基本概念 直接介绍概念太枯燥了,还是拿 ...

  9. 又一道软通动力7K月薪面试题——银行业务调度系统

    后期补充:网友对我诟病最多的就是我帮学生做面试题,说这是小偷和骗子行为,在此,我对自己给学员做面试题做出例如以下解释:  (1)学员拿着面试题来找老师,学生也事先思考和尝试后实在没有办法,又求职心切才 ...

  10. 表单元素-select

    <form> <select size="2"> <option value="JMS HADEN">JMS HADEN&l ...