javascript - slider 未使用 next().show() 显示所有图像

Question

我只是想创建一个简单的 slider 。我的问题是，当我单击“下一步”时，第一个图像将被隐藏，但仅显示第二个图像。所以我只能点击一次“下一步”按钮。

$(document).ready(function() {
    $('.next').on('click', function() {
        $('.slider img').hide().next().show();
    });
});

如何只隐藏未隐藏的单个图像并显示下一个图像？

https://jsfiddle.net/n339tzff/

Answer 1

尝试将 .active 类添加到事件图像，而不是 show()/hide() 图像。检查下面的代码片段以供引用。

$(document).ready(function() {
  $('.next').on('click', function() {
    $('.slider').find('img.active').removeClass('active').next().addClass('active');
  });
  $('.back').on('click', function() {
    $('.slider').find('img.active').removeClass('active').prev().addClass('active');
  });
});

.slider {
  overflow: hidden;
  width: 100%;
  height: 400px;
}

.slider img {
  float: left;
  display: none;
}

.next,
.back {
  width: 100px;
  padding: 5px;
  text-align: center;
  background-color: skyblue;
  float: left;
  margin: 10px;
  cursor: pointer;
}

img.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
  <img class="active" src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="">
  <img src="https://www.w3schools.com/css/img_lights.jpg" alt="">
  <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" alt="">
  <img src="http://images.all-free-download.com/images/graphiclarge/a_london_cityscape_515129.jpg" alt="">
  <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=1920x400:format=jpg/path/s86d6d6c688ca86fa/image/ie4265a3cd27b2997/version/1451246087/image.jpg" alt="">
</div>
<div class="back">Back</div>
<div class="next">Next</div>