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()

fadeOut current element fadeIn next element and reverse

1 个答案: