jquery相册使用列表

Posted 2023-02-25

【中文标题】jquery相册使用列表

【英文标题】：jquery photogallery using list

【发布时间】：2013-02-20 18:52:42

【问题描述】：

我使用 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); 
      );
    
  ); 
);

【参考方案1】：

基本上你的代码一点也不差，只是一个小问题，每次有人点击<li class="photo" />时都会附加事件处理程序。

放积木

$("#prev").click(function() .. 和 "$("#next").click(function() ..." 以及块 "$(".photo").click(function() ... )" 之外的每个此类代码。

它会正常工作的。