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

Question

我正在做一个响应性网站，最初在全屏上，我将在左边有一个内容部分，由10个缩略图组成，右边是主图片(当你点击任何缩略图时，主图片会改变为你点击的缩略图)

在320 to的宽度大小上，我删除了所有的缩略图，我希望图片(主图像)在每次单击时更改为下一个图像。

因此，我的css显示:在320‘m宽屏幕上没有缩略图，然后使用jquery检查，如果显示: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

因此，如果要隐藏当前图像并显示下一个图像，可以尝试如下所示(快速修改此https://stackoverflow.com/a/22430567/2333214)：

​

$(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()，并在$firstSlide中缓存第一张幻灯片fadeIn()。

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