javascript - jQuery 中的简单 slider 在切换后仅显示前两张图片

Question

我正在尝试创建简单的 slider 。当我点击一张图片时，另一张图片就会可见。这是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元素。然后从下一个元素中删除隐藏类 .isHidden ，但向该元素添加相同的类。

如果您单击 slider 的最后一个元素，请返回到第一个图像并为他执行您需要的操作。检查工作代码: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>