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 参数传递给点击函数以获取当前 DOM 元素。而不是从下一个元素中删除 hide class .isHidden，但将相同的 class 添加到该元素。

如果您单击滑块的最后一个元素，返回到第一张图片并为他做您需要做的。检查工作代码：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>

jQuery 中的简单滑块在切换后仅显示前两张图片

Simple slider in jQuery only showing first two pictures after toggling

javascript

jquery

slider