文章/答案/技术大牛

发布

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;
        }
        #slider img {
            width: 100%;
            display: none;
            position: absolute;
            top: 0;
            left: 0;
        }
        #slider img:first-child {
            display: block;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="slider">
        <img src="image1.jpg" alt="Image 1">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>
    <button id="prev">Previous</button>
    <button id="next">Next</button>

    <script>
        $(document).ready(function() {
            var current = 0;
            var images = $('#slider img');
            var count = images.length;

            function showImage(index) {
                images.hide();
                images.eq(index).show();
            }

            $('#prev').click(function() {
                current = (current - 1 + count) % count;
                showImage(current);
            });

            $('#next').click(function() {
                current = (current + 1) % count;
                showImage(current);
            });
        });
    </script>
</body>
</html>

常见问题及解决方法

图片加载顺序问题：如果图片加载顺序不正确，可能会导致滑动效果不流畅。可以通过设置 display: none 和 display: block 来控制图片的显示顺序。
滑动动画效果不流畅：如果滑动动画效果不流畅，可以尝试使用 CSS3 的 transition 属性来实现平滑过渡效果。
按钮点击事件不响应：如果按钮点击事件不响应，可能是由于 jQuery 选择器或事件绑定不正确。确保选择器正确并且事件绑定在 DOM 元素加载完成后进行。

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

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

有帮助

没帮助

android左右滑动图片

、、、、

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

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

回答已采纳

1回答

有没有办法在不使用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

3回答

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

、

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

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

回答已采纳

2回答

UIScrollView -滚动还是滑动？

、

在我的应用程序中，我有一个UIScrollView，我需要从一张图片到另一张图片左右滑动，但我也需要识别一个卷轴。如何用UIScrollView区分滚动和滑动

浏览 2提问于2015-01-16得票数 1

回答已采纳

2回答

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

、

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

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

回答已采纳

1回答

手风琴垂直而不是水平

、、

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

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

回答已采纳

4回答

带有可定制导航功能的Javascript carousel/滑块

、

我目前正在开发一个网站，并在主页上有一个基于javascript的旋转木马/滑块混合，在3或4个不同的图像之间自动淡入淡出，让用户有机会点击一个并转到网站上的另一个页面。我还需要不同的幻灯片有某种类型的导航，表示为每个幻灯片的名称(如在Coda滑块效果)或符号(如每个幻灯片的圆点)，以允许用户查看他们的选项，然后点击幻灯片访问特定的突出显示的部分。提前谢谢。

浏览 0提问于2009-01-15得票数 1

回答已采纳

1回答

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

、、、、

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

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

回答已采纳

1回答

寻找Ubuntu14.04照片查看器就像伴侣之眼

、、、、

它用双指滑动来放大图片.它将使用箭头键左右滚动。要移动到下一张图片，选项卡到上一个按钮，并使用正确的箭头键移动到下一个，点击回车。在Ubuntu14.04上，有没有一种方法可以让Gnome之眼左右滚动而不用光标移动图片？我正在放大这幅画，使它比它在里面的窗户更大。滚动问题将通过使用两个手指左右滑动来解决，但这也会放大和缩小图片。图片是一本书，所以我可以阅读它和编程的例子，而不必使用大的书。

浏览 0提问于2016-11-26得票数 3

2回答