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'按钮提供一个通用的解决方案，它将与我的代码一起工作.previous按钮可以正常工作，但是到达第一个图像后它不会停止到最后一个位置，而next按钮仅对前两个图像起作用停。并且活动班级也不能随幻灯片一起移动，为此问题提供了最佳的解决方案

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);
});

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

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

1 个答案: