文章/答案/技术大牛

发布

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>图片左右滑动</title>
    <style>
        .slider {
            width: 600px;
            overflow: hidden;
            position: relative;
        }
        .slider ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
        }
        .slider li {
            min-width: 100%;
            box-sizing: border-box;
        }
        .slider img {
            width: 100%;
            display: block;
        }
        .slider .prev, .slider .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }
        .slider .prev {
            left: 10px;
        }
        .slider .next {
            right: 10px;
        }
    </style>
</head>
<body>
    <div class="slider">
        <ul>
            <li><img src="image1.jpg" alt="Image 1"></li>
            <li><img src="image2.jpg" alt="Image 2"></li>
            <li><img src="image3.jpg" alt="Image 3"></li>
        </ul>
        <div class="prev">Prev</div>
        <div class="next">Next</div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var $slider = $('.slider ul');
            var $prev = $('.slider .prev');
            var $next = $('.slider .next');
            var slideCount = $slider.find('li').length;
            var slideWidth = $slider.find('li').first().width();
            var currentIndex = 0;

            function slideTo(index) {
                $slider.animate({
                    'left': -index * slideWidth
                }, 500);
                currentIndex = index;
            }

            $prev.click(function() {
                if (currentIndex > 0) {
                    slideTo(currentIndex - 1);
                }
            });

            $next.click(function() {
                if (currentIndex < slideCount - 1) {
                    slideTo(currentIndex + 1);
                }
            });
        });
    </script>
</body>
</html>

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

图片加载问题：确保图片路径正确，且图片大小一致。
滑动动画不流畅：检查 CSS 和 JavaScript 代码，确保没有性能瓶颈。
触摸滑动不支持：可以使用 jQuery 插件如 TouchSwipe 来支持触摸滑动。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script>
<script>
    $(document).ready(function() {
        $('.slider ul').swipe({
            swipeLeft: function() {
                $('.slider .next').click();
            },
            swipeRight: function() {
                $('.slider .prev').click();
            }
        });
    });
</script>

通过以上方法，你可以实现一个基本的图片左右滑动效果，并解决一些常见问题。

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

有帮助

没帮助

android左右滑动图片

、、、、

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

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

回答已采纳

1回答

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

、、、、

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

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

回答已采纳

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

2回答

使用PageControl？

、、、、

该数组只包含一个带有图片地址的字符串。我想使用iPhone软件开发工具包中的页面控件功能来左右滑动来更改图片。我已经有了多点触控手势，我所需要的就是实现页面控件，所以如果我向左然后向右滑动，它将把我带回之前的图像。有没有人知道有什么好的在线页面控件教程或示例代码，可以帮助我实现页面控件。

浏览 1提问于2011-11-30得票数 2

回答已采纳

3回答

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

、

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

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

回答已采纳

4回答

在android中，哪个事件用来左右滑动手指？

我正在创建图片库，如果我点击图像的网格视图，它会显示全屏图像。任何人指导我应该使用哪个事件或程序是什么任何帮助都会得到重视。

浏览 0提问于2010-06-09得票数 7

回答已采纳

2回答

UIScrollView -滚动还是滑动？

、

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

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

回答已采纳

2回答

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

、

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

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

回答已采纳

1回答

二维CSS滑块- jQuery定位

、、、

因此，我正在尝试构建一个二维内容滑块，但我在实现它时遇到了问题。我使用的是jQuery。"slideAllContentLeft"></div>我正在尝试做的(并且我已经能够让某些部分工作)是：(2)让contentSlider div在多个contentBlock div之间<em

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

回答已采纳

1回答

react-原生webview图像单击放大

、、

现在需要实现点击图片放大的效果，如果页面中有多张图片，会出现一个图片列表，可以左右滑动，我现在没有解决这个问题的办法。如果你知道如何解决请告诉我的想法，或将需要使用的组件告诉我。

浏览 4提问于2018-01-22得票数 0

1回答

手风琴垂直而不是水平

、、

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

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

回答已采纳

1回答

libgdx android风格的卷帘

、、

如何使用libgdx实现android风格的左右滑动？(例如:翻阅imgaes)无论哪种方式，请让我知道如果有人有这样的经验。

浏览 1提问于2012-04-19得票数 0

2回答

android gridview、listview或其他

、

我试图实现的是一个网格视图，但只使用1行和无限数量的列。Pageflipper/viewflipper将分别显示3，因此将从1、2、3到4、5、6滚动视图不进行捕捉。Gridview？

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

1回答

Android :左右滑动功能，可播放上一首和下一首歌曲

、、

为了播放上一首和下一首歌曲，我必须实现左右滑动播放条。我必须使整个现在播放的条在左右滑动后可移动。我曾尝试实现ViewPager，但由于我失去了那个播放条的向上滑动功能。我有大量的me.So代码，通过在布局中进行最小的更改，我如何实现向左和向右滑动功能。

浏览 3提问于2014-01-29得票数 0

2回答

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

、

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

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

4回答

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

、

我见过很多用iLife实现这个功能的方法，但我看到的唯一能满足我需求的javascript方法是苹果在新的flash页面()上使用的方法。有没有人知道他们使用的是什么，或者是否有类似于他们的实现的项目？提前谢谢。

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

回答已采纳

1回答

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

、、、、

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

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

2回答