如何通过 javascript 进入下一个 img 元素

Question

我在 page.i 中有很多图片想要点击任何图片，图片显示在另一个大的 img 标签上（这是正确的工作）。然后，我可以在点击下一步按钮时显示下一张图片，然后单击上一个时显示上一张图像 button.i 尝试过，但不起作用 properly.can 谁能帮助我？谢谢。请在下面查看我的代码 css 代码是：

<style>
   .slideshow {
       position: relative; 
   }
  .slideshow img {
     position: absolute;

  }
  .show{}/*complete in the future*/
</style>

html 代码是：

<div class="slideshow">
  <img src="http://placekitten.com/200/300" width="100" height="100" alt="first image">
  <img src="http://placekitten.com/200/287" width="100" height="100" alt="second image">
  <img src="http://placekitten.com/200/285" width="100" height="100" alt="third image">
  <img src="http://placekitten.com/200/286" width="100" height="100" alt="fourth image">
  ...
</div>

<img id="largeImage" src="#" width="200" height="200" alt="Big Image">
<button type="button" Id="prev"> Previous</button>
<button type="button" Id="next">Next</button>

我的js代码是：

$(document).ready(function() {

  /*this function set the large img tag src attribute*/
  $('.slideshow img').click(function() {
    var src = $(this).attr("src");
    $('#largeImage').attr({src: src});
  });

  /*Next Button*/
  $('#next').click(function() {
    var $curr = $('.slideshow img.show');
    var $next = ($curr.next().Lenght) ? $curr.next() : $('slideshow img').first();
    var src = $next.attr("src");
    $("#largeImage").attr({src: src});
    $curr.removeclass('show');
    $next.addclass('show');
  });

  /*Previouse Button*/
  $('#prev').click(function() {
    var $curr = $('.slideshow img.show');
    var $next = ($curr.next().Lenght) ? $curr.next() : $('slideshow img').last();
    var src = $next.attr("src");
    $("#largeImage").attr({src: src});
    $curr.removeclass('show');
    $next.addclass('show');
  });

});

你可以在Jsfiddle

中看到

Answer 1

$(document).ready(function() {

// here all the images will get hide and only 1st image will be displayed
    $('.slideshow img').hide();
  $('.slideshow img:eq(0)').show();

  /*this function set the large img tag src attribute*/
  $('.slideshow img').click(function() {
    var src = $(this).attr("src");
    $('#largeImage').attr({src: src});
  });

  /*Next Button*/
  $('#next').click(function() {
  var displayImageNumber = 0;
// Find the index of image which is visible
    $.each($('.slideshow img'),function(key,value){
            if($(value).css('display') == 'block'){
            displayImageNumber = key;
        }
    }); 
    var displayImage = '';
    $('.slideshow img:eq('+displayImageNumber+')').hide();
    if($('.slideshow img').length == (displayImageNumber + 1)){
        displayImage = $('.slideshow img:eq(0)');
    }else{
        displayImage = $('.slideshow img:eq('+parseInt(displayImageNumber+1)+')');
    }
     $(displayImage).show();
     var src = $(displayImage).attr("src");
    $('#largeImage').attr({src: src});
  });

  /*Previouse Button*/
  $('#prev').click(function() {
    $.each($('.slideshow img'),function(key,value){
            if($(value).css('display') == 'block'){
            displayImageNumber = key;
        }
    }); 
    $('.slideshow img:eq('+displayImageNumber+')').hide();
    var displayImage = '';
    if(displayImageNumber == 0){
        displayImage = $('.slideshow img:eq('+parseInt($('.slideshow img').length-1)+')');
    }else{
        displayImage = $('.slideshow img:eq('+parseInt(displayImageNumber-1)+')');
    }
    $(displayImage).show();
     var src = $(displayImage).attr("src");
    $('#largeImage').attr({src: src});
  });

});

如何通过 javascript 进入下一个 img 元素

How to go next img element by javascript

html

javascript

jquery