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

$('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>

我想使用“下一个”和“上一个”按钮更改图像。我一直在寻找解决方案，但我找不到合适的解决方案。因此，给予一个通用的解决方案'下一个'和'上一个'按钮，这将与我的代码。上一个按钮工作完美，但在第一个图像到达后，它不去最后停止和下一个按钮的工作，只有前2个图像后，它的停止。和活动类也不移动与幻灯片给予这个问题的最佳解决方案提前感谢

试试下面的方法。

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

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

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

1条答案

相关问题

热门标签

最新问答