jquery 鼠标左右滑动

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。鼠标左右滑动通常是指用户在网页上通过鼠标滚轮或者触摸屏进行水平方向的滑动操作。

类型

鼠标左右滑动可以分为以下几种类型：

鼠标滚轮滑动：通过鼠标滚轮进行水平方向的滑动。
触摸屏滑动：在触摸屏设备上通过手指进行水平方向的滑动。

应用场景

图片轮播：在图片轮播组件中，用户可以通过左右滑动来切换图片。
页面导航：在某些页面导航中，用户可以通过左右滑动来切换不同的页面或内容。
数据展示：在数据展示页面中，用户可以通过左右滑动来查看更多的数据。

示例代码

以下是一个简单的示例，展示如何使用 jQuery 监听鼠标滚轮事件并实现左右滑动效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Mouse Swipe</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .container {
            width: 100%;
            overflow: hidden;
        }
        .item {
            width: 100%;
            height: 300px;
            background-color: lightblue;
            display: inline-block;
            margin-right: -100%;
            transition: transform 0.5s ease-in-out;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>

    <script>
        $(document).ready(function() {
            let currentIndex = 0;
            const items = $('.item');
            const totalItems = items.length;

            $(window).on('wheel', function(event) {
                if (event.originalEvent.deltaX > 0) {
                    // 向右滑动
                    currentIndex = (currentIndex - 1 + totalItems) % totalItems;
                } else {
                    // 向左滑动
                    currentIndex = (currentIndex + 1) % totalItems;
                }
                updateTransform();
            });

            function updateTransform() {
                const offset = -currentIndex * 100;
                items.css('transform', `translateX(${offset}%)`);
            }
        });
    </script>
</body>
</html>

常见问题及解决方法

事件监听不生效：
- 确保 jQuery 库已正确加载。
- 确保事件绑定在 DOM 元素加载完成后进行。

滑动效果不流畅：
- 使用 CSS 的 transition 属性来实现平滑的动画效果。
- 避免在事件处理函数中进行复杂的计算或操作。
触摸屏设备上不生效：
- 对于触摸屏设备，可以使用 touchstart、touchmove 和 touchend 事件来替代鼠标滚轮事件。

通过以上示例代码和解决方法，你应该能够实现一个基本的鼠标左右滑动效果，并解决一些常见问题。

页面内容是否对你有帮助？

有帮助

没帮助

在手机图片中滑动(左右)最好/最简单的方法是什么？

、

我需要创建一个交互，让用户在移动图像之间滑动(右-左)。我正在使用Jquery，我想继续使用它。我知道jquery mobile，但如果我能避免它，那就更好了。如果我没有选择，我无论如何都会使用它。我的目标是让网站在我向右或向左滑动时做一些事情。类似于我用“鼠标滚轮”事件实现的东西，但在移动设备上是左右滑动的(而不是鼠标滚轮)。如果有任何建议，我将不胜感激

浏览 30提问于2019-07-26得票数 0

1回答

在鼠标移动时滑动的Jquery滑块

、、、

我正在寻找一个jquery滑块脚本，能够在我移动鼠标时左右滑动。有人知道这种脚本吗？我想达到像一样的效果，但它应该是水平滚动，而不是垂直滚动。

浏览 3提问于2011-01-07得票数 1

回答已采纳

1回答

有没有办法在不使用jQuery UI和jQuery jQuery的情况下在移动设备中左右滑动

你能告诉我有什么方法可以在不使用jQuery UI和jQuery jQuery的情况下在移动设备中左右滑动吗？实际上，有一种方法可以向上滑动和向下滑动。但是有没有左右滑动呢？

浏览 2提问于2013-12-21得票数 2

1回答

在Python Tkinter画布小部件上，如何锁定鼠标的y坐标？

、

我想把鼠标“锁定”到Tkinter画布上的一个特定的Y坐标上，这样当用户移动鼠标时，他们可以穿过X轴，但不能穿过Y轴(鼠标会左右滑动，但不会上下滑动)。有没有办法做到这一点，如何做到这一点？

浏览 0提问于2012-02-10得票数 0

回答已采纳

2回答

如何使用jquery制作简单的向下滑动div

、

好了，我是jquery的新手，也只是在学习。我有一堆div，我想在一个盒子里每隔2秒左右滑动一次。例如，可能是一个苹果的图片，然后替换为一个橙子，等等……有没有一种简单的方法可以用jquery做到这一点？(我不关心访问者是否将鼠标悬停在div上，或诸如此类的事情)。谢谢!

浏览 0提问于2009-05-29得票数 1

回答已采纳

1回答

两种不同元素的jQuery下拉鼠标

、、、、

我想创建一个鼠标下拉式导航(它也适用于移动/ipad上的点击)，并且存在这样的问题，即菜单本身位于一个完全不同的div中。所以不是那个元素的孩子。jQuery('.top-menu').on("mouseover",function(){ jQuery(".top-menu-dropdown").stop().slideToggle

浏览 1提问于2014-12-16得票数 0

回答已采纳

1回答

如何在触摸屏drupal中使用jCarousel与swipe事件？

在我的项目中，我使用jCarousel模块和视图幻灯片模块来测试我用移动设备测试的items.When，我看到了导航方面的问题。我不能很好地滚动。因此，我想为这个问题添加一些脚本，我已经添加了一些脚本为我的视图SLide显示从这个网站(https://gist.github.com/eristoddle/5011106)。幸运的是，它在View中工作得很好，但是它不适用于jCarousel。我需要知道哪个脚本适合我的问题。请告诉我我能做什么？谢谢你的进阶。

浏览 0提问于2014-01-28得票数 2

1回答

JFoenix ListView正在删除选定项下的所有项目

、、

需要在项目上滑动才能将其删除。我尝试将事件侦听器添加到实际列表中，但鼠标单击不会注册到这些项上。我使用的是自定义控件。这会和它有什么关系吗？

浏览 13提问于2017-01-23得票数 0

回答已采纳

2回答

鼠标悬停

、、

我正在尝试鼠标悬停动画下拉，这是我无法得到它，如果我移动鼠标从标签，下拉不应该是可见的。我有链接在下拉时，点击应该去指定的链接。function() {<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&

浏览 3提问于2015-10-16得票数 2

回答已采纳

1回答

手风琴垂直而不是水平

、、

我对Jquery不是很有经验，所以请原谅基本的问题。我正在使用这个简单的jquery accordian 。有没有可能更改jquery或css，使其垂直而不是水平。关于这个问题似乎没有太多的文档。

浏览 2提问于2012-10-03得票数 0

回答已采纳

1回答

触发按钮的需要js方法

、、、

当用户在触摸友好的设备上滑动时，有没有办法触发按钮？我希望允许用户在平板电脑上查看我的网站，并在页面上的文章之间左右滑动，这些文章通常有箭头可用鼠标点击按下。有没有办法允许这种额外的导航形式？

浏览 1提问于2013-06-13得票数 0

回答已采纳

1回答

在应用程序中使用的滑动手势

我有关于使用滑动手势的问题。对于这种情况，我可以使用CCTouch方法吗？如果是，那么我该如何使用它？

浏览 0提问于2012-10-12得票数 0

1回答

单击jquery移动滚动视图

、、、

此版本功能强大，可在触摸滑动或鼠标滑动命令时向左/向右滚动(Chrome 12)。我不知道如何通过按钮或鼠标单击向左/向右滚动？有人知道吗？

浏览 0提问于2011-09-11得票数 0

2回答

mouseup事件上的Jquery滑块

、

我使用的是jquery-1.7.1.js和jquery.slider.js onstatechange: function( value ){ } 此函数在滑块通过鼠标滑动时调用。我想要相同的滑块功能与事件滑动释放(如鼠标向上)，而不

浏览 4提问于2012-11-21得票数 1

回答已采纳

1回答

让html元素在jQuery移动刷上跟随手指

、、、、

我有一个div，我在上面监听使用jQuery手机的滑动事件。几乎只有当滑动发生时才会被拖走。$(&

浏览 0提问于2013-08-16得票数 1

3回答

jquery鼠标悬停

、

我想要一个简单的滑动/向上滑动动画在鼠标上的一个链接。我可以让鼠标工作，但我不知道如何让鼠标做它的事情。javascript" src="http://www.google.com/jsapi"></script> google.load("jquery", &q

浏览 0提问于2009-07-12得票数 27

回答已采纳

2回答

jquery动画不能正常工作

好的，我有一个导航栏和一个触发器具有相同的类，我的想法是当触发器悬停时，jquery会将触发器和导航栏的移动都发送到动画中，导航栏通过页面底部的溢出隐藏起来。我得到了jquery动画，但我的问题是，当我将鼠标悬停在触发器上，然后移动到具有相同类的导航栏时，它会再次将工具栏的隐藏发送到运动中，而不是保持打开状态，因为我将鼠标悬停在它上面。这里是一些基础知识(在wordpress中运行，这就是为什么jQuery胜过$)： jQuery(document).ready(function() {

浏览 2提问于2011-12-15得票数 0

8回答