图库中的下一个和上一个按钮

Question

$('body').on('click', '.Image', function () {
   $('#main_img').attr('src', $(this).attr('src'));
   $('.pt-3 > div').removeClass('active');
   $(this).closest('.col-md-2').addClass('active');
});

$('body').on('click', 'button', function() {
   var current = $('.active').length > 0 ? $('.active') : $('.col-md-2').eq(0);
   current.removeClass('.active');
   if($(this).attr('id') === 'prev') {
        var prev = current.prev();
        prev.addClass('active');
        var img = prev.find('img').attr('src');
   } else {
       var next = current.next();
       next.addClass('active');
       var img = next.find('img').attr('src');
   }
   $('#main_img').attr('src', img);
});

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Task3_slider</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/task3.css" rel="stylesheet" />
    <link href="css/all.css" rel="stylesheet" />
</head>


<body>

    <div class="main">


        <div class="container">


            <div class="row d-flex justify-content-center">
                <button onclick="previmg()">❮</button>
                <div class="col-md-6 d-flex justify-content-center ">
                    <img id="main_img" imgid="1" src="img/product-1.JPG" />
                </div>

                <button onclick="nextimg()">❯</button>
            </div>


            <div class="row d-flex justify-content-center">

                <div class="col-md-6 d-flex pt-3">
                    <div class="thumbnail d-flex">
                        <div class="col-md-2 ">
                            <img imgid="1" class="Image" src="img/product-1.JPG" />
                        </div>
                        <div class="col-md-2  ">
                            <img imgid="2" class="Image" src="img/product-2.jpg" />
                        </div>
                        <div class="col-md-2  ">
                            <img imgid="3" class="Image" src="img/product-3.jpg" />
                        </div>
                        <div class="col-md-2  ">
                            <img imgid="4" class="Image" src="img/product-4.jpg" />
                        </div>
                        <div class="col-md-2 ">
                            <img imgid="5" class="Image" src="img/product-5.jpg" />
                        </div>
                        <div class="col-md-2 ">
                            <img imgid="6" class="Image" src="img/product-6.jpg" />
                        </div>
                    </div>
                    

                </div>

            </div>

        </div>

    </div>

    <script src="jquery-3.3.1.min.js"></script>
    <script src="popper.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="task3.js"></script>

</body>
</html>

我想使用 'next' 和 'previous' 按钮更改图像。我已经搜索了解决方案，但找不到合适的解决方案。因此，为 'next' 和 'previous' 按钮提供一个通用解决方案，它将与我的 code.previous 按钮完美配合，但在到达第一个图像后，它不会停止，下一个按钮仅适用于第 2 张图像之后停止。并且 active class 也不会随 slide 一起移动，这是解决此问题的最佳方法在此先感谢

Answer 1

试试下面的方法。

// here you handle your click on image
$('body').on('click', '.Image', function () {
   $('#main_img').attr('src', $(this).attr('src'));
   $('.active').removeClass('active');
   $(this).closest('.col-md-2').addClass('active');
});
// here you handle your prev/next clicks
$('body').on('click', 'button', function() {
   if($(this).attr('id') === 'prev') {
        var prev = $('.active').prev();
        if(prev.length) {
            $('.active').removeClass('active');
        }
        prev.addClass('active');
        var img = prev.find('img').attr('src');
   } else {
       var next = $('.active').next();
       if(next.length) {
            $('.active').removeClass('active');
       }
       next.addClass('active'); 
       var img = next.find('img').attr('src');
   }
   $('#main_img').attr('src', img);
});

您所要做的就是在用户开始点击之前首先将活动 class 添加到其中一张幻灯片。

图库中的下一个和上一个按钮

Next and previous button in gallery

jquery

gallery

button

next