jQuery中的簡單滑塊僅顯示切換后的前兩張圖片

Question

我正在嘗試創建簡單的滑塊。 當我單擊圖片時，另一個將可見。 這是一個帶有代碼的codepen

最終，我實際上想創建一個類似於旋轉木馬的函數，該函數將遍歷調用.animate({scrollLeft}) ...但是我也陷入了循環實現中。 但是要踩嬰兒，對不對？

編輯：問題是我只切換第一個，然后是第二個圖片，共4個。

這是代碼：

index.html

<div class=container>
  <img class='isActive' src="http://placehold.it/350x150">
  <img class='isHidden' src="http://placehold.it/350x150"> 
  <img class='isHidden' src="http://placehold.it/350x150"> 
  <img class='isHidden'src="http://placehold.it/350x150">
</div>

index.scss

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background: black;
}

.container {
 // display: inline-flex;
}

.slide {

}

.isActive {
  visibility: visible;  
}

.isHidden {
 visibility: hidden; 
}

index.js

$(function() {
  var allImgItems = $('img');
  var items = $('.container').find(allImgItems);

  toggleVisibility = function(item) {    
    item.toggleClass('isHidden');
    item.next().removeClass('isHidden').addClass('isActive');
//    item.next().removeClass('isHidden').animate( { scrollLeft: 200 + 'px'}, '500', 'swing', function() {console.log('Animation completed') } );
    console.log(item);
  }

  toggleItem = function () {
    var item = $('img:first').click(function () {  // [QUESTION]The problem is here I think, since I'm just passing the first obj and not the list?
      toggleVisibility(item);
    })
  }
  toggleItem();
})

Answer 1

您可以將event.currentTarget參數傳遞給click函數，以獲取當前的DOM元素。 並且比從下一個元素中刪除hide類.isHidden ，但是要向該元素添加相同的類。

如果單擊滑塊的最后一個元素，請返回第一個圖像並為他做所需的工作。 檢查工作代碼： codePen

 $(function() { var allImgItems = $('img'); var items = $('.container').find(allImgItems); allImgItems.click(function(event, index) { var item = $(event.currentTarget) item.addClass('isHidden'); item.next("img").removeClass('isHidden').addClass('isActive'); item.next().removeClass('isHidden').animate({ scrollLeft: 200 + 'px' }, '500', 'swing', function() { console.log('Animation completed') }); if ($(this).is(':last-child')) { allImgItems.first("img").removeClass('isHidden').addClass('isActive'); } }); }) 

 html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { background: black; } .container { display: inline-flex; } .slide {} .isActive { visibility: visible; } .isHidden { visibility: hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class=container> <img class='isActive' src="https://placehold.it/150x150"> <img class='isHidden' src="https://placehold.it/150x150"> <img class='isHidden' src="https://placehold.it/150x150"> </div>