单击jquery html更改为下一个图像

Question

我正在做一个响应式网站，最初是全屏的，我将在左侧有一个包含 10 个缩略图的内容部分，右侧是主图像（当您单击任何缩略图时，主图像将变为您点击的缩略图）

在 320 像素宽度尺寸上，我删除了所有缩略图，并且我希望图片（主图像）在每次点击时更改为下一个图像。

所以我 css display:none 320px 宽度屏幕上的缩略图，然后使用 jquery 检查，如果 display:none = true，则激活主图像可点击，但现在我被困在如何更改为每次点击时下一张图片。我希望我能得到一些关于我能理解的最简化代码的信息，因为我不是很好。

HTML

<div id="sectionTwo_mainPic">
    <img class="mainPic" src="highlight1.jpg">
    <img class="mainPic" src="highlight2.jpg">
    <img class="mainPic" src="highlight3.jpg">
</div>

jQuery

//if mainPic is clicked and thumbnail is not visible, change pic to next pic in order per click
$('#sectionTwo_mainPic').on('click', function(){
    var test = $('.container #sectionTwo_thumbnail');

    if (! test.is(':visible')) {
        // not sure what to type here   
    }
});

所以基本上， 我单击image1，它隐藏并显示image2，单击并隐藏并显示image3 ..等等 谢谢

Answer 1

所以如果你想隐藏当前图像并显示下一张，你可以尝试类似下面的方法（快速修改这个answer）：

$(window).load(function() {
  var $slider = $("#sectionTwo_mainPic"),
    $slides = $slider.find("img"),
    $firstSlide = $slides.first();

  $(".mainPic").click(function() {
    var $active = $('.active'),
      $next = ($active.next().length > 0) ? $active.next() : $firstSlide;
    $active.fadeOut(1000, function() {
      $active.removeClass('active');
      $next.fadeIn(1000).addClass('active');
    });
  });
})

img {
  position: absolute;
  width: 150px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sectionTwo_mainPic">
  <img class="mainPic active" src="http://i46.tinypic.com/2epim8j.jpg">
  <img class="mainPic" src="http://i49.tinypic.com/28vepvr.jpg">
  <img class="mainPic" src="http://i50.tinypic.com/f0ud01.jpg">
</div>

基本上我们设置类active 来指示当前幻灯片。默认情况下，第一张幻灯片（或您想要的任何其他内容）在标记中指定为 active 类。

每当用户点击幻灯片时，我们使用$active.next().length检查下一张幻灯片是否可用，如果可用我们fadeOut()当前幻灯片和fadeIn()下一张幻灯片，否则我们我们fadeOut()当前幻灯片和@ 987654325@第一张幻灯片，我们缓存在$firstSlide中

---

附注：上面的代码只有在加载所有图像后才激活幻灯片（添加点击处理程序）。如果您不想等待，可以使用$(document).ready() 而不是$(window).load()。