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

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

cwzhsi

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

阅读量1.7w

点赞数 1

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

本文链接：https://blog.csdn.net/cwzhsi/article/details/50581172

版权

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

摘要由CSDN通过智能技术生成

起初我想尝试用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">