jquery 点击左右箭头滑动

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，可以轻松地实现页面上的交互效果。

类型

jQuery 的滑动效果主要有以下几种类型：

slideDown()：元素向下滑动显示。
slideUp()：元素向上滑动隐藏。
slideToggle()：切换元素的滑动显示和隐藏。

应用场景

滑动效果常用于：

图片轮播图
侧边栏的展开和收起
列表的展开和收起

示例代码

以下是一个使用 jQuery 实现点击左右箭头滑动效果的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 滑动效果示例</title>
    <style>
        .container {
            width: 300px;
            overflow: hidden;
        }
        .slider {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }
        .item {
            min-width: 100px;
            height: 100px;
            background-color: lightblue;
            margin-right: 10px;
        }
        .arrow {
            cursor: pointer;
            font-size: 20px;
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="slider">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
    <div class="arrow left" id="leftArrow">&lt;</div>
    <div class="arrow right" id="rightArrow">&gt;</div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            let position = 0;
            const itemWidth = 100;
            const totalItems = 4;

            $('#leftArrow').click(function() {
                if (position > 0) {
                    position -= itemWidth;
                    $('.slider').css('transform', `translateX(-${position}px)`);
                }
            });

            $('#rightArrow').click(function() {
                if (position < (totalItems - 4) * itemWidth) {
                    position += itemWidth;
                    $('.slider').css('transform', `translateX(-${position}px)`);
                }
            });
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：滑动效果不流畅。原因：可能是由于 CSS 过渡效果设置不当或 JavaScript 执行效率低。 解决方法：

确保 CSS 过渡效果设置正确，如 transition: transform 0.5s ease-in-out;。
使用 requestAnimationFrame 来优化 JavaScript 动画性能。

问题：滑动超出范围。原因：可能是由于滑动位置计算错误。 解决方法：在点击事件中添加边界检查，确保滑动位置在合理范围内。

通过以上示例代码和解决方法，可以实现一个简单的点击左右箭头滑动效果，并解决常见的滑动问题。

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

有帮助

没帮助

Xamarin表单:可以通过右翻转或左翻转查看图片吗？

、

如果我选择一张照片，所选的照片将显示在另一个页面上，并带有左右箭头。点击左边箭头时，相册的前一张图片在屏幕上是可见的，如果点击右箭头，相册中的下一张图片将出现在屏幕上。截图我需要查看下/先前的图片，而不点击箭头。可以通过左右滑动来查看图片吗？是否有任何控制来识别右/左屏幕滑动？

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

回答已采纳

1回答

触发按钮的需要js方法

、、、

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

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

回答已采纳

1回答

在网站的移动端添加滑动动画

、、、、

当一个图像被点击时，一个带有后向和向前按钮的模式弹出窗口覆盖在屏幕上，它工作得很好。您将如何建议实现这样的东西？是否有内置的CSS、jQuery或角命令？

浏览 1提问于2017-05-17得票数 0

回答已采纳

1回答

编程jquery滑块

、

我想自己编写jquery滑块，而不是使用任何插件。但我想知道基本的想法。/div> </li><li> <div>content </div> </li> 我希望一次只显示三个项目，并且会有左右两端的数组我知道jquery的基础知识。但是我不知道我应该怎么做。我的意思

浏览 1提问于2010-05-20得票数 0

回答已采纳

2回答

android中的水平滑块

我想创建一个水平滑动条，滑动左右，根据相应的按钮点击。我附在下面的图片作为参考.....我想创建被蓝色区域包围的东西。如右箭头所示，用于在右侧滑动条，并根据水平条上的选定项在下方显示不同的项目和信息。我已经在网上搜索了足够多，但没有找到像上面这样的相似之处。请给我推荐正确的解决方案。提前谢谢。

浏览 2提问于2012-02-09得票数 1

1回答

使用滑块外部的另一个按钮将滑块动画化

我需要点击这个滑块的外侧按钮(div类)。我需要触发这个左和右按钮，从滑块的外侧，使用另一个下一步和右边的按钮。

浏览 1提问于2014-02-20得票数 0

回答已采纳

1回答

如何通过分别单击右箭头和左箭头将页面更改为SwipeView的下一项或前一项？

、

我想通过点击SwipeView左右的箭头，在项目之间前后滑动。如何在QML中实现此行为？

浏览 3提问于2017-04-28得票数 1

回答已采纳

1回答

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

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

1回答

我使用一个滑块来展示我的照片，当你点击其中一个缩略图时，滑块div fadeIn。当你使用箭头键、键盘左/右键、鼠标点击或滑动来更改幻灯片时，网址将相应地更改以反映它所在的幻灯片，这要归功于jQuery地址插件。按ESC或徽标将fadeOut滑块div。问题是，当我加载主页，但没有点击任何缩略图并按下键盘的左右键时，URL会改变(因为它实际上改变了滑块的幻灯片，即使你看不到它)。{ $.address.state(ajax_object.path).c

浏览 1提问于2012-12-25得票数 1

回答已采纳

2回答

如何从上向下滑动JQuery手机

、、、、

我正在尝试让事件发生在上下滑动而不是左右滑动上我可以使用箭头图标(onClick())处理事件，但我想添加向上向下滑动事件，当添加向上向下滑动事件时，它在左向右工作我希望它向上向下

浏览 2提问于2013-06-16得票数 28

回答已采纳

1回答

jQuery导航滑动下划线修改

、、

我目前有一个简单的导航栏，它下面有一个向上箭头，当点击其中一个导航标题时，它就会滑动。箭头从两个导航标题之间开始。当点击一个导航标题时，也会有一些文本滑动。我想要它，这样当再次点击导航标题时，下面的箭头滑回到它的起始位置(这是一个名为uparrow的css类)。class="bottom2"> &

浏览 16提问于2016-08-01得票数 0

回答已采纳

1回答

使水平导航菜单幻灯片显示更多的选项点击箭头

、、、

我希望最后一个选项是一个箭头，当点击箭头显示更多选项时，整个菜单水平地向左滑动，然后一个左箭头向后滑动。我研究了几天，并发现了一些类似的例子，但只是没有在我的情况下起作用。

浏览 3提问于2014-09-17得票数 1

回答已采纳

2回答

使副导航滑行和滑动切换。

、、、

它应该向下滑动，并在上下左右点击时向上滑动。 $(".sub-nav").slideToggle();});&

浏览 0提问于2018-01-23得票数 1

回答已采纳

1回答

寻找寻呼机(jQuery插件)

是否有具有下列功能的寻呼机(jQuery插件)：谢谢

浏览 2提问于2010-08-23得票数 1

回答已采纳

1回答

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

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

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

点击加载更多