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

最新推荐文章于 2022-04-23 14:24:35 发布

cwzhsi

最新推荐文章于 2022-04-23 14:24:35 发布

阅读量1.7w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： touch originalEvent 移动端图片滑动

本文链接：https://blog.youkuaiyun.com/cwzhsi/article/details/50581172

JS 专栏收录该内容

51 篇文章

订阅专栏

本文介绍了如何在移动端实现图片左右滑动效果，首先尝试了jQuery Mobile和zepto.js，但由于各种原因选择使用原生JavaScript的touch事件。通过监听touchstart, touchmove, touchend事件，比较手指坐标变化来判断滑动方向，进而改变图片容器的left值。在获取触摸事件时，需要注意使用event.originalEvent来获取原生事件对象，以确保在不同浏览器环境下的兼容性。" 113975013,10535207,Python多进程multiprocessing模块Queue实现进度条,"['Python', '多进程库', 'multiprocessing', '数据处理', '爬虫开发']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

起初我想尝试用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在移动设备的触摸事件中尤其重要。

效果图如下：