如何在最后一個divimg到達后重新啟動此jQuery滑塊

這是一個簡單的 jQuery 滑塊，但我想將其設定為最后一個 img div 到達時，如果我們點擊next它應該再次回傳到第一個，就像我們要回到上一個按鈕一樣，如果第一個 img div 到達然后它應該作為與背面相同的最后一個回傳。

我試過這段代碼，但它不起作用：

$(document).ready(function(){
$('.next').click(function(){
var active = $('.slide .active');

 if(active.next('div').length != 0) {
    $('.slide').find('div.active').next().
        addClass('active');
$('.slide').find('div.active').prev().
        removeClass('active');
        }
        else {
        $('#slide div:first').addClass('active');
        }

});
$('.prev').click(function(){
 if(active.prev('div').length != 0) {
    $('.slide').find('div.active').prev().
        addClass('active');
$('.slide').find('div.active').next().
        removeClass('active');
   }
      else {
        $('#slide div:last').addClass('active');
        }
   
   
});
});

我的整個滑塊代碼是：

$(document).ready(function(){
$('.next').click(function(){
    $('.slide').find('div.active').next().
        addClass('active');
$('.slide').find('div.active').prev().
        removeClass('active');

});
$('.prev').click(function(){
    $('.slide').find('div.active').prev().
        addClass('active');
$('.slide').find('div.active').next().
        removeClass('active');

});
});

.container {
position: relative;
width: 600px;
height: 400px;
background: yellow;
}
.container .slide {
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
Z-index: 2;
}

.container .slide div
{
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
}

.container .slide div img

{
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.container .slide div.active
{
opacity: 1;
visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="container">
<div class="slide">
<div class="active"><img src="https://images.tv9hindi.com/wp-content/uploads/2021/11/LPG-Gas-Cylinder.jpg?w=600&dpr=6.4"></div>
<div><img src="https://static.india.com/wp-content/uploads/2021/09/LPG-Price-Hike.jpg"></div>
<div><img src="https://hindi.cdn.zeenews.com/hindi/sites/default/files/2021/10/31/958129-indian-railways-time-tables.jpg"></div>
<div><img src="https://new-img.patrika.com/upload/2020/10/27/cylinder1_6484690_835x547-m.jpg"></div>
</div>
</div>

<button class="prev">prev</button>
<button class="next">next</button>

uj5u.com熱心網友回復：

單擊下一步時 - 檢查最后一個 div是否具有該類 active。如果是這樣，請將其洗掉并將其添加到第一個 div。當點擊上一個時 - 做相反的事情。

片段：

$(document).ready(function(){
$('.next').click(function(){
  $('.slide').find('div.active').next().addClass('active');
  $('.slide').find('div.active').prev().removeClass('active');
  if ($('.slide div:last-of-type').hasClass('active')) {
    $('.slide div:last-of-type').removeClass('active');
    $('.slide div:first-of-type').addClass('active');
  }
});
$('.prev').click(function(){
  $('.slide').find('div.active').prev().addClass('active');
  $('.slide').find('div.active').next().removeClass('active');
  if ($('.slide div:first-of-type').hasClass('active')) {
    $('.slide div:first-of-type').removeClass('active');
    $('.slide div:last-of-type').addClass('active');
  }
});
});

.container {
position: relative;
width: 600px;
height: 400px;
background: yellow;
}
.container .slide {
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
Z-index: 2;
}

.container .slide div
{
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
}

.container .slide div img

{
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.container .slide div.active
{
opacity: 1;
visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="container">
<div class="slide">
<div class="active"><img src="https://images.tv9hindi.com/wp-content/uploads/2021/11/LPG-Gas-Cylinder.jpg?w=600&dpr=6.4"></div>
<div><img src="https://static.india.com/wp-content/uploads/2021/09/LPG-Price-Hike.jpg"></div>
<div><img src="https://hindi.cdn.zeenews.com/hindi/sites/default/files/2021/10/31/958129-indian-railways-time-tables.jpg"></div>
<div><img src="https://new-img.patrika.com/upload/2020/10/27/cylinder1_6484690_835x547-m.jpg"></div>
</div>
</div>

<button class="prev">prev</button>
<button class="next">next</button>

標籤：javascript html 查询 css

上一篇：每頁最多存盤6張卡片

下一篇：如何在表格中找到最匹配的相鄰行