如何去下一个img元素的javascript

How to go next img element by javascript

本文关键字：javascript 元素 img 何去 下一个      更新时间：2023-09-26

我的页面上有很多图片。我想当点击任何图像，图像显示在其他大的img标签(这是正确的工作)。然后，我可以显示下一个图像时，单击下一个按钮和显示上一个图像时，单击上一个按钮。我试过了，但是不能正常工作。有人能帮我吗，谢谢。请看下面我的代码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');
  });
});

可以在jsfield

中看到
$(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});
  });
});
相关文章：