包含3个文件：html、slider-H5.js、jquery.js(自行下载)。在html中可配置滑动参数。具体代码如下：

HTML代码：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  6. <meta name="viewport" content = "width=device-width, target-densitydpi=high-dpi, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  7. <meta name="apple-mobile-web-app-capable" content="yes" />
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  9. <meta content="telephone=no" name="format-detection" />
  10. <meta name="keywords" content="seokeywords"/>
  11. <meta name="description" content="seodescription"/>
  12. <title>H5手指滑动切换图片</title>
  13. <style>
  14. ul,li{margin:0;padding:0;}
  15. @media screen and (min-width:240px) {
  16.     html, body{
  17.         font-size:9px;
  18.     }
  19. }
  20. @media screen and (min-width:320px) {
  21.     html, body{
  22.         font-size:12px;
  23.     }
  24. }
  25. @media screen and (min-width:480px) {
  26.     html, body{
  27.     font-size:18px;
  28.     }
  29. }
  30. @media screen and (min-width:640px) {
  31.     html, body{
  32.         font-size:24px;
  33.     }
  34. }
  35. @media screen and (min-width:960px) {
  36.     html, body{
  37.         font-size:36px;
  38.     }
  39. }
  40. div.imgbox{width:25rem;height:16.5rem;overflow:hidden;margin:0 auto;}
  41. div.imgbox ul{clear:both;width:75rem;display: inline-block;}
  42. div.imgbox ul li{float:left;width:25rem;height:16.5rem;overflow:hidden;text-align:center;}
  43. div.imgbox ul li img{width:24rem;height:16.5rem;}
  44. #page{color:red;}
  45. </style>
  46. </head>
  47. <body>
  48. <div class="imgbox">
  49.     <ul>
  50.         <li><a href="#"><img src="http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f3d8533e.jpg"></img></a></li>
  51.         <li><a href="#"><img src="http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f23aad06.jpg"></img></a></li>
  52.         <li><a href="#"><img src="http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f345282b.jpg"></img></a></li>
  53.     </ul>
  54. </div>
  55. <div>这里通过回调显示当前滚动到多少页:<span id="page">0</span></div>
  56. <script src="jquery-1.10.2yuan.js"></script>
  57. <script src="slider-H5.js"></script>
  58. <script>
  59. (function(){
  60. /*
  61.     注意：$.mggScrollImg返回的scrollImg对象上有
  62.             next，prev，go三个方法，可以实现外部对滚动索引的控制。
  63.     如：scrollImg.next();//会切换到下一张图片
  64.         scrollImg.go(0);//会切换到第一张图片
  65. */
  66. var scrollImg = $.mggScrollImg('.imgbox ul',{
  67.         loop : true,//循环切换
  68.         auto : true,//自动切换
  69.         auto_wait_time:3000,//轮播间隔
  70.         scroll_time:300,//滚动时长
  71.         callback : function(ind){//这里传过来的是索引值
  72.             $('#page').text(ind+1);
  73.         }
  74.     });
  75. })()
  76. </script>
  77. </body>
  78. </html>

slider-H5.js 代码

  1. (function($){
  2.     /*
  3.         图片滚动效果
  4.         @jQuery or @String box : 滚动列表jQuery对象或者选择器 如：滚动元素为li的外层ul
  5.         @object config : {
  6.                 @Number width : 一次滚动宽度，默认为box里面第一个一级子元素宽度[如果子元素宽度不均匀则滚动效果会错乱]
  7.                 @Number size : 列表长度，默认为box里面所有一级子元素个数[如果size不等于一级子元素个数，则不支持循环滚动]
  8.                 @Boolean loop : 是否支持循环滚动 默认 true
  9.                 @Boolean auto : 是否自动滚动,支持自动滚动时必须支持循环滚动，否则设置无效,默认为true
  10.                 @Number auto_wait_time : 自动轮播一次时间间隔,默认为：3000ms
  11.                 @Function callback : 滚动完回调函数，参入一个参数当前滚动节点索引值
  12.             }
  13.     */
  14.     function mggScrollImg(box,config){
  15.         this.box = $(box);
  16.         this.config = $.extend({},config||{});
  17.         this.width = this.config.width||this.box.children().eq(0).width();//一次滚动的宽度
  18.         this.size = this.config.size||this.box.children().length;
  19.         this.loop = this.config.loop!==undefined ? (this.config.loop==true ? true : false) : true;//默认能循环滚动
  20.         this.auto =this.config.auto!==undefined ? (this.config.auto==true ? true : false) : true;//默认自动滚动
  21.         this.auto_wait_time = this.config.auto_wait_time||3000;//轮播间隔
  22.         this.scroll_time =this.config.scroll_time!==undefined?(this.config.scroll_time>0?this.config.scroll_time:0) : 300;//滚动时长
  23.         this.minleft = -this.width*(this.size-1);//最小left值，注意是负数[不循环情况下的值]
  24.         this.maxleft =0;//最大lfet值[不循环情况下的值]
  25.         this.now_left = 0;//初始位置信息[不循环情况下的值]
  26.         this.point_x = null;//记录一个x坐标
  27.         this.point_y = null;//记录一个y坐标
  28.         this.move_left = false;//记录向哪边滑动
  29.         this.index = 0;
  30.         this.busy = false;
  31.         this.timer;
  32.         this.init();
  33.     }
  34.     $.extend(mggScrollImg.prototype,{
  35.         init : function(){
  36.             this.bind_event();
  37.             this.init_loop();
  38.             this.auto_scroll();
  39.         },
  40.         bind_event : function(){
  41.             var self = this;
  42.             self.box.bind('touchstart',function(e){
  43.                 var t=e.touches?e.touches:e.originalEvent.targetTouches;
  44.                 if(t.length==1 && !self.busy){
  45.                     self.point_x = t[0].screenX;
  46.                     self.point_y = t[0].screenY;
  47.                 }
  48.             }).bind('touchmove',function(e){
  49.                 var t=e.touches?e.touches:e.originalEvent.targetTouches;
  50.                 if(t.length==1 && !self.busy){
  51.                     return self.move(t[0].screenX,t[0].screenY);//这里根据返回值觉得是否阻止默认touch事件
  52.                 }
  53.             }).bind('touchend',function(e){
  54.                 !self.busy && self.move_end();
  55.             });
  56.         },
  57.         /*
  58.             初始化循环滚动,当一次性需要滚动多个子元素时，暂不支持循环滚动效果,
  59.             如果想实现一次性滚动多个子元素效果，可以通过页面结构实现
  60.             循环滚动思路：复制首尾节点到尾首
  61.         */
  62.         init_loop : function(){
  63.              if(this.box.children().length>1 && this.box.children().length == this.size && this.loop){//暂时只支持size和子节点数相等情况的循环
  64.                 this.now_left = -this.width;//设置初始位置信息
  65.                 this.minleft = -this.width*this.size;//最小left值
  66.                 this.maxleft = -this.width;
  67.                 this.box.prepend(this.box.children().eq(this.size-1).clone()).append(this.box.children().eq(1).clone()).css(this.get_style(2));
  68.                 this.box.css('width',this.width*(this.size+2));
  69.             }else{
  70.                 this.loop = false;
  71.                 this.box.css('width',this.width*this.size);
  72.             }
  73.         },
  74.         auto_scroll : function(){//自动滚动
  75.             var self = this;
  76.             if(!self.auto)return;
  77.             clearTimeout(self.timer);
  78.             self.timer = setTimeout(function(){
  79.                 self.go_index(self.index+1);
  80.             },self.auto_wait_time);
  81.         },
  82.         go_index : function(ind){//滚动到指定索引页面
  83.             var self = this;
  84.             if(self.busy)return;
  85.             clearTimeout(self.timer);
  86.             self.busy = true;
  87.             if(self.loop){//如果循环
  88.                 ind = ind<0?-1:ind;
  89.                 ind = ind>self.size?self.size:ind;
  90.             }else{
  91.                 ind = ind<0?0:ind;
  92.                 ind = ind>=self.size?(self.size-1):ind;
  93.             }
  94.             if(!self.loop && (self.now_left == -(self.width*ind))){
  95.                 self.complete(ind);
  96.             }else if(self.loop && (self.now_left == -self.width*(ind+1))){
  97.                 self.complete(ind);
  98.             }else{
  99.                 if(ind == -1 || ind == self.size){//循环滚动边界
  100.                     self.index = ind==-1?(self.size-1):0;
  101.                     self.now_left = ind==-1?0:-self.width*(self.size+1);
  102.                 }else{
  103.                     self.index = ind;
  104.                     self.now_left = -(self.width*(self.index+(self.loop?1:0)));
  105.                 }
  106.                 self.box.css(this.get_style(1));
  107.                 setTimeout(function(){
  108.                     self.complete(ind);
  109.                 },self.scroll_time);
  110.             }
  111.         },
  112.         complete : function(ind){//动画完成回调
  113.             var self = this;
  114.             self.busy = false;
  115.             self.config.callback && self.config.callback(self.index);
  116.             if(ind==-1){
  117.                 self.now_left = self.minleft;
  118.             }else if(ind==self.size){
  119.                 self.now_left = self.maxleft;
  120.             }
  121.             self.box.css(this.get_style(2));
  122.             self.auto_scroll();
  123.         },
  124.         next : function(){//下一页滚动
  125.             if(!this.busy){
  126.                 this.go_index(this.index+1);
  127.             }
  128.         },
  129.         prev : function(){//上一页滚动
  130.             if(!this.busy){
  131.                 this.go_index(this.index-1);
  132.             }
  133.         },
  134.         move : function(point_x,point_y){//滑动屏幕处理函数
  135.             var changeX = point_x - (this.point_x===null?point_x:this.point_x),
  136.                 changeY = point_y - (this.point_y===null?point_y:this.point_y),
  137.                 marginleft = this.now_left, return_value = false,
  138.                 sin =changeY/Math.sqrt(changeX*changeX+changeY*changeY);
  139.             this.now_left = marginleft+changeX;
  140.             this.move_left = changeX<0;
  141.             if(sin>Math.sin(Math.PI/3) || sin<-Math.sin(Math.PI/3)){//滑动屏幕角度范围：PI/3  -- 2PI/3
  142.                 return_value = true;//不阻止默认行为
  143.             }
  144.             this.point_x = point_x;
  145.             this.point_y = point_y;
  146.             this.box.css(this.get_style(2));
  147.             return return_value;
  148.         },
  149.         move_end : function(){
  150.             var changeX = this.now_left%this.width,ind;
  151.             if(this.now_left<this.minleft){//手指向左滑动
  152.                 ind = this.index +1;
  153.             }else if(this.now_left>this.maxleft){//手指向右滑动
  154.                 ind = this.index-1;
  155.             }else if(changeX!=0){
  156.                 if(this.move_left){//手指向左滑动
  157.                     ind = this.index+1;
  158.                 }else{//手指向右滑动
  159.                     ind = this.index-1;
  160.                 }
  161.             }else{
  162.                 ind = this.index;
  163.             }
  164.             this.point_x = this.point_y = null;
  165.             this.go_index(ind);
  166.         },
  167.         /*
  168.             获取动画样式，要兼容更多浏览器，可以扩展该方法
  169.             @int fig : 1 动画 2  没动画
  170.         */
  171.         get_style : function(fig){
  172.             var x = this.now_left ,
  173.                 time = fig==1?this.scroll_time:0;
  174.             return {
  175.                 '-webkit-transition':'-webkit-transform '+time+'ms',
  176.                 '-webkit-transform':'translate3d('+x+'px,0,0)',
  177.                 '-webkit-backface-visibility': 'hidden',
  178.                 'transition':'transform '+time+'ms',
  179.                 'transform':'translate3d('+x+'px,0,0)'
  180.             };
  181.         }
  182.     });
  183.     /*
  184.         这里对外提供调用接口，对外提供接口方法
  185.         next ：下一页
  186.         prev ：上一页
  187.         go ：滚动到指定页
  188.     */
  189.     $.mggScrollImg = function(box,config){
  190.         var scrollImg = new mggScrollImg(box,config);
  191.         return {//对外提供接口
  192.             next : function(){scrollImg.next();},
  193.             prev : function(){scrollImg.prev();},
  194.             go : function(ind){scrollImg.go_index(parseInt(ind)||0);}
  195.         }
  196.     }
  197. })(jQuery)

参考：http://www.cnblogs.com/huzhiming/p/3732688.html（修改了源代码的部分bug：循环参数loop和自动切换参数配置无效；新增滚动时长配置；只有一张图片时不允许切换。）

H5+CSS3实现手指滑动切换图片的更多相关文章

  1. Android：使用ViewPager实现左右滑动切换图片（图上有点点）

    在以下实例的基础上加上点点 Android:使用ViewPager实现左右滑动切换图片 (简单版) 效果预览: 因为要把点点放图片上,所以修改布局为相对布局: <?xml version=&qu ...

  2. Android：使用ViewPager实现左右滑动切换图片 (简单版)

    ViewPager,它是google SDk中自带的一个附加包的一个类, 可以使视图滑动. 步骤: 1.引入android-support-v4.jar包,在主布局里加入 <android.su ...

  3. 基于jQuery左右滑动切换图片代码

    分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="v_ou ...

  4. H5手指滑动切换卡片效果

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. WPF之鼠标滑动切换图片

    在网上找了一会儿也没找到我想要的效果,还是自己动手,丰衣足食吧. 需求:当前面板中只显示一张图片,图片栏的下部有用来显示当前图片处于图片队列中的位置的圆球,并且点击下部栏内的圆球可以快速切换,附动画缓 ...

  6. android 图片浏览器滑动切换图片

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...

  7. Swiper 滑动切换图片（可用于PC端，移动端）

    作为一名后端的普通程序猿, 你让我搞这种前端不是跟我玩命吗,所以用插件来搞,省事又简单,而且Swiper使用又简单是吧: 头皮发麻,不喜欢说废话,我更喜欢直接看到效果: 按Swiper官方文档来说, ...

  8. 微信小程序左右滑动切换图片酷炫效果

    开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. < ...

  9. 微信小程序左右滑动切换图片酷炫效果（附效果）

    开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. < ...

随机推荐

  1. Javascript之document对象用法（很重要）

    一.找到元素 document.getElementById("id"):根据id找层,最多找一个 var a=document.getElementById("id&q ...

  2. Atitit..文件上传组件选型and最佳实践总结(3)----断点续传控件的实现

    Atitit..文件上传组件选型and最佳实践总结(3)----断点续传控件的实现 1. 实现思路:::元插件,元设置... 1 2. 实现流程downzip,unzip,exec 1 3. Zip  ...

  3. atitit.客户端连接oracle数据库的方式总结

    客户端连接oracle数据库的方式总结 目录 Java程序连接一般使用jar驱动连接..... 桌面GUI一般采取c语言驱动oci.dll 直接连接... 间接连接(需要配置tns及其envi var ...

  4. Which Clang Warning Is Generating This Message?

    Which Clang Warning Is Generating This Message? 根据前面页面制作的pdf:clangwarninglist.pdf 百度网盘:http://pan.ba ...

  5. 关于TCP的粘包

    2014年与宗宗一起去厦门测试软件接口的时候,与上级系统基于TCP方式通讯,数据量大时,经常通讯失败,检查日志发现是上级系统应该多次返回的数据一次性接收到了. 上网搜索了一下,才了解到TCP粘包的问题 ...

  6. 单元测试 mock EF 中DbContext 和DbSet Include

    现在EF越来越流行了,很多时候业务成都是直接访问DbContext 和DbSet来操作数据的. 那么我们测试的时候如何来mock这2个对象了?现在时间很晚了, 就直接贴code吧 首先看看的我们DbC ...

  7. ubuntu下安装oracle

    本来打算在 redhat 下面安装了,但是没有 redhat 的盘了,就装了个 ubuntu 桌面版,结果安装起来十分费劲,主要是之前没安装过,对 oracle 的架构和配置也不太懂. 下面记录我安装 ...

  8. C# 修改webbrowser 的 useragent

    Also, there is a refresh option in the function (according to MSDN). It worked well for me (you shou ...

  9. Java 多线程(2)-Executor

    public interface Executor{ void executor(Runnable command); } 如上所写,Executor实际上是一个接口,他提供了唯一的接口方法execu ...

  10. c++中typename和class的区别介绍

    "typename"是一个C++程序设计语言中的关键字.相当用于泛型编程时是另一术语"class"的同义词.这个关键字用于指出模板声明(或定义)中的非独立名称( ...