手机端图片左右滑动效果实现

Dear 丶 2022-08-20 02:16 259阅读 0赞

起初我想尝试用jQuery Mobile的swipeleft和swiperight,可以实现手势左右滑动的效果，但是jQuery Mobile对页面的其它部分影响很大，所以不得不放弃使用。接着我又尝试用zepto.js，但是由于页面很大部分已经依赖了jQuery，jQuery和zepto.js存在冲突，我本打算解决冲突，让两者共存，但是最后还是放弃了，因为觉得引入两者实在是太冗余。所以我最后采用了js原生的touch事件。通过比较前后手指在页面中的坐标之差来判断向左滑动还是向右滑动，然后移动包括图片的元素ul的left值。

这里用到了QWeb，xml文件内容如下：

<span style="white-space:pre">		</span><div class="visible-xs mb-box">
                            <div class="slider">
                                <ul class="clearfix slider-wrap">
                                    <t t-foreach="product.product_template_image_urls" t-as="image_url">
                                        <li>
                                            <a href="javascript:;" class="pic">
                                                <img t-att-src="image_url.url_middle"/>
                                            </a>
                                        </li>
                                    </t>
    
                                </ul>
                                <ul class="slide-nav">
                                    <t t-foreach="product.product_template_image_urls" t-as="image">
                                        <t t-if="image_index == 0">
                                            <li class="selected"></li>
                                        </t>
                                        <t t-if="image_index > 0">
                                           <li></li>
                                        </t>
                                    </t>
                                </ul>
                            </div>
    
                        </div>

对应的js内容如下：

function PicSliser() {
            return new PicSliser.prototype.init();
        }
        PicSliser.prototype = {
            init: function() {
                var self = this;
                self.$parent = $('.slider');
                self.$ul = self.$parent.find('.slider-wrap');
                self.picNum = self.$ul.find('li').length;
                self.width = self.$parent.width();
                self.$ul.find('li').css('width',self.width);
                self.$ul.css('width', self.width * self.picNum);
                self.index = 0;
                self.picTranslate();
            },
            move: function() {
                var self = this;
                self.$ul.animate({
                    'left':-self.width * self.index
                },400, 'swing');
                $('.slide-nav').find('li').eq(self.index)
                        .addClass('selected').siblings().removeClass('selected');
            },
            moveNext: function() {
                var self = this;
                if(self.index >= self.picNum-1) {
                    return;
                }
                self.index++;
                self.move();
    
            },
            moverPre: function() {
                var self = this;
                if(self.index <= 0) {
                    return;
                }
                self.index--;
                self.move();
            },
            picTranslate: function() {
                var self = this,
                    startPosition,
                    endPOsition,
                    deltaX,
                    deltaY;
                self.$ul.find('.pic').bind('touchstart', function(e) {
                    var touch = e.originalEvent.targetTouches[0];
                    startPosition = {
                        x: touch.pageX,
                        y: touch.pageY
                    }
                }).bind('touchmove', function(e) {
                    var touch = e.originalEvent.targetTouches[0];
                    endPosition = {
                        x: touch.pageX,
                        y: touch.pageY
                    };
                    deltaX = endPosition.x - startPosition.x;
                    deltaY = endPosition.y - startPosition.y;
                }).bind('touchend', function(e) {
                    if(deltaX < 0) {
                        self.moveNext();
                    } else if(deltaX > 0) {
                        self.moverPre();
                    }
                })
    
            }
        }
        PicSliser.prototype.init.prototype = PicSliser.prototype;
        var picSliser = new PicSliser();

总结：

基本触摸事件：  
1. touchstart ：手指放在一个DOM元素上。  
2. touchmove ：手指拖曳一个DOM元素。  
3. touchend ：手指从一个DOM元素上移开。  
每个触摸事件都包括了三个触摸列表：  
1. touches ：当前位于屏幕上的所有手指的一个列表。  
2. targetTouches ：位于当前DOM元素上的手指的一个列表。  
3. changedTouches ：涉及当前事件的手指的一个列表。  
  
在取得DOM元素上的targetTouches时，注意不能直接使用event.targetTouches,而是要使用event.originalEvent。这里event和originalEvent的区别在于：event在这里是被jQuery包装后的事件对象，jQuery事件对象暴漏了一个originalEvent属行用来访问原生的js事件对象。由于在不同的浏览器环境和事件类型中对应的originalEvent并不总是相同，所以需要直接使用原生的事件对象，originalEvent在移动设备的触摸事件中尤其重要。

效果图如下：

![Center][]

[Center]: /images/20220731/aaafa722e25d48c2b0733f0e0aa2845d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，259人围观）

还没有评论，来说两句吧...

相关阅读

相关移动端使用Swiper实现左右滑动切换内容

效果图如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

青旅半醒/ 2022年12月19日 09:26/ 0 赞/ 440 阅读

相关 html实现图片自动滚动效果,js实现图片左右滚动效果

需求：页面显示教师信息列表，列表中每一条数据显示图片滚动插件，每张图片的长宽及长宽比例各不相同。前提条件：美工把静态页面写好 HTML代码： @using Models

曾经终败给现在/ 2022年10月05日 12:44/ 0 赞/ 305 阅读

相关微信小程序实现卡片左右滑动效果

前言快放假了，人狠话不多，啥也不说了。先看效果图。思路从上面的效果图来看，基本的需求包括：左右滑动到一定的距离，就向相应的方向移动一个卡片的位置。

向右看齐/ 2022年10月01日 11:47/ 0 赞/ 808 阅读

相关手机端图片左右滑动效果实现

起初我想尝试用jQuery Mobile的swipeleft和swiperight,可以实现手势左右滑动的效果，但是jQuery Mobile对页面的其它部分影响很大，所以不得

Dear 丶/ 2022年08月20日 02:16/ 0 赞/ 260 阅读

相关仿探探图片卡左右滑动效果

效果图： ![Center][] 1、实现如图效果 2、根据接口请求数据并展示 3、实现如效果视频的切换效果 4、换一批可以切换随机切换一批电影数据添加依赖

布满荆棘的人生/ 2022年06月03日 01:44/ 0 赞/ 245 阅读

相关手机端左右全屏滑动（加精）【判断PC还是移动端】

上下滑动：[http://blog.csdn.net/libin\_1/article/details/50527583][http_blog.csdn.net_lib

桃扇骨/ 2022年05月16日 06:07/ 0 赞/ 228 阅读

相关 Android实现左右滑动指引效果

　　本文介绍Android中实现左右滑动的指引效果。　　关于左右滑动效果，我在以前的一篇博文中提到过，有兴趣的朋友可以查看：[http://www.cnblogs.c

古城微笑少年丶/ 2021年12月22日 15:05/ 0 赞/ 410 阅读

相关 Android 使用ViewPager实现左右循环滑动图片

ViewPager这个小demo实现的是可以左右循环滑动图片，下面带索引，滑到最后一页在往右滑动就要第一页，第一页往左滑动就到最后一页，先上效果图，用美女图片是我一贯的作风，呵

墨蓝/ 2021年12月07日 11:13/ 0 赞/ 366 阅读

相关 vue移动端实现手机左右滑动入场动画

app.vue <template> <div id="app"> <transition :name="transitionName">

桃扇骨/ 2021年09月29日 15:02/ 0 赞/ 373 阅读

相关 vue 路由之左右滑动效果

keep-alive 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM，我们要把它也包裹在transition标签内，否则页面将重新渲染，切换的动

分手后的思念是犯贱/ 2021年09月16日 08:48/ 0 赞/ 477 阅读