jQuery中的简单滑动条，在切换后只显示前两张图片

Question

我正在尝试创建一个简单的滑动条。当我点击一张图片时，另一张就会显示出来。下面是代码

的代码依赖

最终，我实际上想创建一个类似于旋转木马的函数，它将循环通过我的项目调用.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参数点击函数来获取当前的DOM元素。然后从下一个元素中删除隐藏类.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>