1

我使用 html 列表制作了一个 jquery 照片库。我在使用上一个和下一个按钮时遇到问题。当您在加载后立即打开照片时，它们可以正常工作。如果我关闭图库，转到另一张照片并单击它以打开我的下一个和上一个变量，有些变量不再正常工作，它们会跳过照片。我想要做的是使用变量和 jquery .next 和 .previous 作为箭头。

非常感谢您对此的任何帮助。

我在这里有一个演示http://jsbin.com/uvikug/11/edit

打开照片、下一个和上一个按钮的代码具体是这样的，但您可以在该链接中看到所有这些：

$(".photo").click(function() {
  $("#loading_box_container").animate({
    height: "100%"
  }, 300, function() {
      $("#close").css({
        display: "block"
      });        
  });

  id = $(this).attr('id');
  $('#preload').prop('src', 'http://www.klossal.com/klossviolins/gallery/fulls/' + id + '.jpg');

  fadeIn('#' + id);


  $("#next").click(function() {  
    if (!$('#' + id).hasClass("last")) {
      $("#preload").fadeOut(500, function() {
      var id_a = $('#' + id).next().attr('id');
      id = id_a;

      $('#preload').prop('src', 'http://www.klossal.com/klossviolins/gallery/fulls/' + id_a + '.jpg');

      fadeIn('#' + id_a);
      });
    }
  });

  $("#prev").click(function() {
    if (!$('#' + id).hasClass("first")) {
      $("#preload").fadeOut(500, function() {
      var id_b = $('#' + id).prev().attr('id');
      id = id_b;  

      $('#preload').prop('src', 'http://www.klossal.com/klossviolins/gallery/fulls/' + id + '.jpg');

      fadeIn('#' + id); 
      });
    }
  }); 
});
4

1 回答 1

1

基本上你的代码一点也不差，只是一个小问题，每次有人点击<li class="photo" />.

只需放置积木

$("#prev").click(function() {.. 并且"$("#next").click(function() { ..."每个这样的代码都在块之外"$(".photo").click(function() { ... })"。

它会正常工作。

于 2013-02-20T19:15:36.737 回答