经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS3 » 查看文章
怎样实现H5+CSS3手指滑动切换图片的示例代码
来源：jb51　　时间：2019/5/6 8:39:31　　对本文有异议

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

HTML代码：

  1. <!DOCTYPE HTML>
  2. <html>
  3.     
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  7.         <meta name="viewport" content="width=device-width, target-densitydpi=high-dpi, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
  8.         />
  9.         <meta name="apple-mobile-web-app-capable" content="yes" />
  10.         <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  11.         <meta content="telephone=no" name="format-detection" />
  12.         <meta name="keywords" content="seokeywords" />
  13.         <meta name="description" content="seodescription" />
  14.         <title>
  15.             H5手指滑动切换图片
  16.         </title>
  17.         <style>
  18.             ul,li{margin:0;padding:0;} @media screen and (min-width:240px) { html,
  19.             body{ font-size:9px; } } @media screen and (min-width:320px) { html, body{
  20.             font-size:12px; } } @media screen and (min-width:480px) { html, body{ font-size:18px;
  21.             } } @media screen and (min-width:640px) { html, body{ font-size:24px; }
  22.             } @media screen and (min-width:960px) { html, body{ font-size:36px; } }
  23.             div.imgbox{width:25rem;height:16.5rem;overflow:hidden;margin:0 auto;} div.imgbox
  24.             ul{clear:both;width:75rem;display: inline-block;} div.imgbox ul li{float:left;width:25rem;height:16.5rem;overflow:hidden;text-align:center;}
  25.             div.imgbox ul li img{width:24rem;height:16.5rem;} #page{color:red;}
  26.         </style>                   
  27.     </head>
  28.                                        
  29.     <body>
  30.         <div class="imgbox">
  31.             <ul>
  32.                 <li>
  33.                     <a href="#">
  34.                         <img src="http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f3d8533e.jpg">
  35.                         </img>
  36.                     </a>
  37.                 </li>
  38.                 <li>                      
  39.                     <a href="#">
  40.                         <img src="http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f23aad06.jpg">
  41.                         </img>
  42.                     </a>
  43.                 </li>
  44.                 <li>
  45.                     <a href="#">
  46.                         <img src="http://y2.ifengimg.com/df84c07b46e03f8e/2014/0512/rdn_53708f345282b.jpg">
  47.                         </img>
  48.                     </a>
  49.                 </li>
  50.             </ul>
  51.         </div>
  52.         <div>
  53.             这里通过回调显示当前滚动到多少页:
  54.             <span id="page">
  55.                 0
  56.             </span>
  57.         </div>
  58.         <script src="jquery-1.10.2yuan.js">
  59.         </script>
  60.         <script src="slider-H5.js">
  61.         </script>
  62.         <script>
  63.             (function() {
  64.                 /*
  65.     注意：$.mggScrollImg返回的scrollImg对象上有
  66.             next，prev，go三个方法，可以实现外部对滚动索引的控制。
  67.     如：scrollImg.next();//会切换到下一张图片
  68.         scrollImg.go(0);//会切换到第一张图片
  69. */
  70.                 var scrollImg = $.mggScrollImg('.imgbox ul', {
  71.                     loop: true,
  72.                     //循环切换
  73.                     auto: true,
  74.                     //自动切换
  75.                     auto_wait_time: 3000,
  76.                     //轮播间隔
  77.                     scroll_time: 300,
  78.                     //滚动时长
  79.                     callback: function(ind) { //这里传过来的是索引值
  80.                         $('#page').text(ind + 1);
  81.                     }
  82.                 });
  83.             })()
  84.         </script>
  85.     </body>
  86.  
  87. </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({},
  17.         config || {});
  18.         this.width = this.config.width || this.box.children().eq(0).width(); //一次滚动的宽度
  19.         this.size = this.config.size || this.box.children().length;
  20.         this.loop = this.config.loop !== undefined ? (this.config.loop == true ? true: false) : true; //默认能循环滚动
  21.         this.auto = this.config.auto !== undefined ? (this.config.auto == true ? true: false) : true; //默认自动滚动
  22.         this.auto_wait_time = this.config.auto_wait_time || 3000; //轮播间隔
  23.         this.scroll_time = this.config.scroll_time !== undefined ? (this.config.scroll_time > 0 ? this.config.scroll_time: 0) : 300; //滚动时长
  24.         this.minleft = -this.width * (this.size - 1); //最小left值，注意是负数[不循环情况下的值]
  25.         this.maxleft = 0; //最大lfet值[不循环情况下的值]
  26.         this.now_left = 0; //初始位置信息[不循环情况下的值]
  27.         this.point_x = null; //记录一个x坐标
  28.         this.point_y = null; //记录一个y坐标
  29.         this.move_left = false; //记录向哪边滑动
  30.         this.index = 0;
  31.         this.busy = false;
  32.         this.timer;
  33.         this.init();
  34.     }                                     
  35.     $.extend(mggScrollImg.prototype, {
  36.         init: function() {
  37.             this.bind_event();
  38.             this.init_loop();
  39.             this.auto_scroll();
  40.         },
  41.         bind_event: function() {
  42.             var self = this;
  43.             self.box.bind('touchstart',
  44.             function(e) {
  45.                 var t = e.touches ? e.touches: e.originalEvent.targetTouches;
  46.                 if (t.length == 1 && !self.busy) {
  47.                     self.point_x = t[0].screenX;
  48.                     self.point_y = t[0].screenY;
  49.                 }
  50.             }).bind('touchmove',
  51.             function(e) {
  52.                 var t = e.touches ? e.touches: e.originalEvent.targetTouches;
  53.                 if (t.length == 1 && !self.busy) {
  54.                     return self.move(t[0].screenX, t[0].screenY); //这里根据返回值觉得是否阻止默认touch事件
  55.                 }
  56.             }).bind('touchend',
  57.             function(e) { ! self.busy && self.move_end();
  58.             });
  59.         },
  60.         /*
  61.             初始化循环滚动,当一次性需要滚动多个子元素时，暂不支持循环滚动效果,
  62.             如果想实现一次性滚动多个子元素效果，可以通过页面结构实现
  63.             循环滚动思路：复制首尾节点到尾首
  64.         */
  65.         init_loop: function() {
  66.             if (this.box.children().length > 1 && this.box.children().length == this.size && this.loop) { //暂时只支持size和子节点数相等情况的循环
  67.                 this.now_left = -this.width; //设置初始位置信息
  68.                 this.minleft = -this.width * this.size; //最小left值
  69.                 this.maxleft = -this.width;
  70.                 this.box.prepend(this.box.children().eq(this.size - 1).clone()).append(this.box.children().eq(1).clone()).css(this.get_style(2));
  71.                 this.box.css('width', this.width * (this.size + 2));
  72.             } else {
  73.                 this.loop = false;
  74.                 this.box.css('width', this.width * this.size);
  75.             }                           
  76.         },
  77.         auto_scroll: function() { //自动滚动
  78.             var self = this;
  79.             if (!self.auto) return;
  80.             clearTimeout(self.timer);
  81.             self.timer = setTimeout(function() {
  82.                 self.go_index(self.index + 1);
  83.             },
  84.             self.auto_wait_time);
  85.         },
  86.         go_index: function(ind) { //滚动到指定索引页面
  87.             var self = this;
  88.             if (self.busy) return;
  89.             clearTimeout(self.timer);
  90.             self.busy = true;
  91.             if (self.loop) { //如果循环
  92.                 ind = ind < 0 ? -1 : ind;
  93.                 ind = ind > self.size ? self.size: ind;
  94.             } else {
  95.                 ind = ind < 0 ? 0 : ind;
  96.                 ind = ind >= self.size ? (self.size - 1) : ind;
  97.             }
  98.             if (!self.loop && (self.now_left == -(self.width * ind))) {
  99.                 self.complete(ind);
  100.             } else if (self.loop && (self.now_left == -self.width * (ind + 1))) {
  101.                 self.complete(ind);
  102.             } else {
  103.                 if (ind == -1 || ind == self.size) { //循环滚动边界
  104.                     self.index = ind == -1 ? (self.size - 1) : 0;
  105.                     self.now_left = ind == -1 ? 0 : -self.width * (self.size + 1);
  106.                 } else {
  107.                     self.index = ind;
  108.                     self.now_left = -(self.width * (self.index + (self.loop ? 1 : 0)));
  109.                 }
  110.                 self.box.css(this.get_style(1));
  111.                 setTimeout(function() {
  112.                     self.complete(ind);
  113.                 },
  114.                 self.scroll_time);
  115.             }
  116.         },
  117.         complete: function(ind) { //动画完成回调
  118.             var self = this;
  119.             self.busy = false;
  120.             self.config.callback && self.config.callback(self.index);
  121.             if (ind == -1) {
  122.                 self.now_left = self.minleft;
  123.             } else if (ind == self.size) {
  124.                 self.now_left = self.maxleft;
  125.             }
  126.             self.box.css(this.get_style(2));
  127.             self.auto_scroll();
  128.         },
  129.         next: function() { //下一页滚动
  130.             if (!this.busy) {
  131.                 this.go_index(this.index + 1);
  132.             }
  133.         },
  134.         prev: function() { //上一页滚动
  135.             if (!this.busy) {
  136.                 this.go_index(this.index - 1);
  137.             }                                     },
  138.         move: function(point_x, point_y) { //滑动屏幕处理函数
  139.             var changeX = point_x - (this.point_x === null ? point_x: this.point_x),
  140.             changeY = point_y - (this.point_y === null ? point_y: this.point_y),
  141.             marginleft = this.now_left,
  142.             return_value = false,
  143.             sin = changeY / Math.sqrt(changeX * changeX + changeY * changeY);
  144.             this.now_left = marginleft + changeX;
  145.             this.move_left = changeX < 0;
  146.             if (sin > Math.sin(Math.PI / 3) || sin < -Math.sin(Math.PI / 3)) { //滑动屏幕角度范围：PI/3  -- 2PI/3
  147.                 return_value = true; //不阻止默认行为
  148.             }
  149.             this.point_x = point_x;
  150.             this.point_y = point_y;
  151.             this.box.css(this.get_style(2));
  152.             return return_value;
  153.         },
  154.         move_end: function() {
  155.             var changeX = this.now_left % this.width,
  156.             ind;
  157.             if (this.now_left < this.minleft) { //手指向左滑动
  158.                 ind = this.index + 1;
  159.             } else if (this.now_left > this.maxleft) { //手指向右滑动
  160.                 ind = this.index - 1;
  161.             } else if (changeX != 0) {
  162.                 if (this.move_left) { //手指向左滑动
  163.                     ind = this.index + 1;
  164.                 } else { //手指向右滑动
  165.                     ind = this.index - 1;
  166.                 }
  167.             } else {
  168.                 ind = this.index;
  169.             }
  170.             this.point_x = this.point_y = null;
  171.             this.go_index(ind);
  172.         },
  173.         /*
  174.             获取动画样式，要兼容更多浏览器，可以扩展该方法
  175.             @int fig : 1 动画 2  没动画
  176.         */
  177.         get_style: function(fig) {
  178.             var x = this.now_left,
  179.             time = fig == 1 ? this.scroll_time: 0;
  180.             return {
  181.                 '-webkit-transition': '-webkit-transform ' + time + 'ms',
  182.                 '-webkit-transform': 'translate3d(' + x + 'px,0,0)',
  183.                 '-webkit-backface-visibility': 'hidden',
  184.                 'transition': 'transform ' + time + 'ms',
  185.                 'transform': 'translate3d(' + x + 'px,0,0)'
  186.             };
  187.         }           
  188.  
  189.     });
  190.     /*
  191.         这里对外提供调用接口，对外提供接口方法
  192.         next ：下一页
  193.         prev ：上一页
  194.         go ：滚动到指定页
  195.     */
  196.     $.mggScrollImg = function(box, config) {
  197.         var scrollImg = new mggScrollImg(box, config);
  198.         return { //对外提供接口
  199.             next: function() {
  200.                 scrollImg.next();
  201.             },
  202.             prev: function() {
  203.                 scrollImg.prev();
  204.             },
  205.             go: function(ind) {
  206.                 scrollImg.go_index(parseInt(ind) || 0);
  207.             }
  208.         }
  209.     }
  210. })(jQuery)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS3热门文章

  • CSS3选择器新增问题的实现_css3_CSS
  • CSS3实现列表无限滚动/轮播效果_css3_CSS
  • CSS3 Tab动画实例之背景切换动态效果_css3_CSS
  • Github上流行的CSS3动画效果库 animate.css
  • CSS3通过var()和calc()函数实现动画特效_css3_CSS
  • CSS3动画之DIY Loading动画
  • CSS中这个函数你会用吗？垂直居中都可以设置
  • 巧用 CSS3的webkit-box-reflect 倒影实现各类动效_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3过渡旋转透视2d3d动画等效果的实例代码_css3_CSS

    • CSS3推荐文章

  • 【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究
  • 可视化学习：如何生成简单动画让图形动起来
  • 【布局进阶】巧用 :has & drop-shadow 实现复杂布局效果
  • 【动画进阶】神奇的背景，生化危机4日食 Loading 动画还原
  • 【动画进阶】神奇的 3D 磨砂玻璃透视效果
  • 快速构建页面结构的 3D Visualization
  • 详解CSS3.0(Cascading Style Sheet) 层叠级联样式表_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3实现的侧滑菜单_css3_CSS
  • CSS3常见动画的实现方式_css3_CSS

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号