如何去下一個img元素的javascript

我有很多圖像在page.i想點擊任何圖像時，圖像顯示在另一個大的img標籤（這是正確的工作）。然後，我可以顯示下一個圖像時點擊下一步按鈕並顯示上一張圖片，點擊prev button.i試過，但它不能正常工作。任何人都可以幫助我？謝謝。請參見下面的 CSS代碼我的代碼是：如何去下一個img元素的javascript

<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

看

來源

2016-06-28 asadi.hasan

有沒有類作爲'show'的元素 – Rayon

小提琴鏈接是錯誤的？ – Oxi

已更新您的代碼..請檢查此鏈接.. [https://jsfiddle.net/e0bafbdp/6/ –

$(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}); 
    }); 

});

來源

2016-06-28 12:37:30

thanks.your答案是我的答案，但請改善它。我不想隱藏圖像時，一個圖像大顯示。再次感謝。 –

如何去下一個img元素的javascript

回答

相關問題