javascript - 淡出当前元素 淡入下一个元素并反向

Question

我需要一些帮助来解决这个问题。我有一个包含很多图像的 div:

<a href="#" id="trigger_next">Next</a>
<a href="#" id="trigger_prev">Prev</a>

<div id="image_wrapper">
  <img id="image1" class="images" src="image1.jpg"/>
  <img id="image2" class="images" style="display: none;" src="image2.jpg"/>
  <img id="image3" class="images" style="display: none;" src="image3.jpg"/>
  <img id="image4" class="images" style="display: none;" src="image4.jpg"/>
  <img id="image5" class="images" style="display: none;" src="image5.jpg"/>
  <img id="image6" class="images" style="display: none;" src="image6.jpg"/>
</div>

我正在寻找的是一种对相同类型的 next 或 previous 元素执行某些操作的方法。例如:

$('#trigger_next').click(function() {
  $(current_image).fadeOut();
  $(next_image).fadeIn();
});

找出当前和下一个图像并将其放入工作函数中的最佳方法是什么。

谢谢

Answer 1

CSS

  .images{
    display:none;
    }

JS

$(document).ready(function(){
$("#image_wrapper").find("img:first").show();

//for next section

$('#next').click(function() {
var visible=$("#image_wrapper img:visible"); //select visible image then do action
    visible.fadeOut();
    visible.next().fadeIn();
        });

//for previous section
 $('#previousid').click(function() {
   var visible=$("#image_wrapper img:visible");
    visible.fadeOut();
    visible.prev().fadeIn();
     });

});

引用 prev() 和 next()