jquery左右滑动带左右按钮

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。左右滑动效果通常用于图片轮播、内容切换等场景，通过左右按钮控制内容的滑动。

类型

基于 CSS 的滑动：通过改变元素的 left 或 transform 属性来实现滑动效果。
基于 JavaScript 的滑动：通过定时器或事件触发，逐步改变元素的位置。

应用场景

图片轮播：在网站首页展示多张图片，用户可以通过点击左右按钮切换图片。
内容切换：在新闻网站或博客中，通过左右滑动切换不同的文章或内容块。
移动端应用：在移动应用中实现类似手机屏幕切换的效果。

示例代码

以下是一个简单的 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>
        #slider {
            width: 600px;
            overflow: hidden;
            position: relative;
        }
        .slide {
            width: 600px;
            height: 300px;
            display: none;
            position: absolute;
            top: 0;
            left: 0;
        }
        .slide.active {
            display: block;
        }
        #left-btn, #right-btn {
            cursor: pointer;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        #left-btn {
            left: 10px;
        }
        #right-btn {
            right: 10px;
        }
    </style>
</head>
<body>
    <div id="slider">
        <div class="slide active" style="background-color: red;">Slide 1</div>
        <div class="slide" style="background-color: green;">Slide 2</div>
        <div class="slide" style="background-color: blue;">Slide 3</div>
    </div>
    <button id="left-btn">Left</button>
    <button id="right-btn">Right</button>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var slideCount = $('.slide').length;
            var currentSlide = 0;

            function showSlide(index) {
                $('.slide').removeClass('active');
                $('.slide').eq(index).addClass('active');
            }

            $('#left-btn').click(function() {
                currentSlide = (currentSlide - 1 + slideCount) % slideCount;
                showSlide(currentSlide);
            });

            $('#right-btn').click(function() {
                currentSlide = (currentSlide + 1) % slideCount;
                showSlide(currentSlide);
            });
        });
    </script>
</body>
</html>

可能遇到的问题及解决方法

滑动效果不流畅：
- 原因：可能是由于 JavaScript 执行效率不高或 CSS 动画设置不当。
- 解决方法：优化 JavaScript 代码，减少 DOM 操作；使用 CSS3 动画代替 JavaScript 动画。

按钮点击无响应：
- 原因：可能是 jQuery 未正确加载或事件绑定失败。
- 解决方法：检查 jQuery 库是否正确引入；确保在 DOM 加载完成后绑定事件。
滑动超出范围：
- 原因：滑动逻辑错误，导致滑动超出内容范围。
- 解决方法：在滑动逻辑中添加边界检查，确保滑动不会超出内容范围。

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

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

有帮助

没帮助

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

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

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

1回答

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

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

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

2回答

左右滑动效果

、、

我有一个下面的html代码： <div class="mtabArrowLeft">Left</div> <input class="menutabBTN" name="" type="butto

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

1回答

可左右滑动的jquery动画

我有以下jquery。我试图做的是，当我向下滚动我的页面时，通过900px，一个div幻灯片从左边滑出，当我向上滚动通过900px时，它的幻灯片离开了视图。

浏览 0提问于2016-06-26得票数 1

1回答

手风琴垂直而不是水平

、、

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

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

回答已采纳

1回答

带有按钮和滑动功能的Android View Flow

、、

我有一组名为a1到a7的图像，我需要滑动这些图像，以及我必须为navigation.Rigt添加前进和后退按钮，现在我只是使用一个圆形视图流，我可以滑动。但我不知道如何添加按钮。

浏览 0提问于2015-03-25得票数 0

1回答

将CSS转换-定时功能转换为滑动

、、、、

.in { transition-timing-function: cubic-bezier(1, 0, 1, 1);除此之外，我希望能够通过在屏幕上滑动来淡入我使用以下Jquery根据用户滑动的程度设置不透明度： $(document).on('touchmove', function因此，例如，如果completion在25%，不透明度应该在2%左右。50%左右

浏览 0提问于2018-06-22得票数 1

回答已采纳

2回答

ECSlidingViewController2可以与左键和右键同时使用吗？

、、

每个示例只显示导航栏左边的一个按钮。提前感谢！

浏览 3提问于2013-12-20得票数 0

回答已采纳

2回答

我需要Vaadin导航控制与两个箭头在左边和右边像传递的链接

、

我的问题是哪个控件在此链接上可见哪个是用来导航的(屏幕左侧和右侧的左右箭头按钮，你可以按下它们来改变中间的内容，或者像这样的东西默认在vaadin中不存在，而这是在jquery中存在的?)

浏览 1提问于2013-12-20得票数 0

2回答

android左右滑动图片

、、、、

我将两个图像存储在一个数组中，图像会出现，但我试图实现的是，当用户向右滑动屏幕时，第二个图像会出现，当向左滑动回到第一个图像时，第二个图像就会出现。

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

回答已采纳

1回答

左右滑动切换布局？

当你向左滑动手指时，我怎么能有一个布局，它会转到另一个布局或活动？

浏览 3提问于2011-05-24得票数 0

3回答

如何使用jQuery创建左右滑动效果？

、、

我有以下jQuery代码片段：var target2 = $('.div2');target2.delay(3000).fadeIn();与.fadeIn()类似，是否有向左/向右滑动的选项

浏览 2提问于2013-04-25得票数 1

回答已采纳

1回答

滑动div左右跳跃

、、

我已经创建了一个滑动的div，它显示了一些内容，当你点击一个图像。除了单击前面的箭头/关闭按钮，div跳转之外，一切正常。它关闭，然后再打开。我只想在点击那个小箭头的时候关闭div。

浏览 2提问于2014-10-23得票数 0

回答已采纳

1回答

同时将div滑入和滑出页面视图

、、、、

我有6个按钮，按钮1 -3负责左边的div，按钮4-6负责右边的div。单击buttons#1时，div#1会从左侧滑出，然后从容器的左侧定位自己的宽度。对于所有其他按钮也是如此。单击button#4时，div#4将从右侧滑出，并从容器的右侧定位自己的宽度。当另一个按钮被单击时，div的隐藏与上面的相同，一次只能看到一个div。<script type="text/javascript" src="jquery

浏览 3提问于2012-06-15得票数 1

回答已采纳

1回答