Question

我正在尝试制作照片库。大型照片容器开始为空，当您单击缩略图时，它使用ID将完整大小的照片加载到容器中，并且fadein函数确保在淡入淡出之前加载它。这部分画廊工作得很好，但它是前一个和下一个按钮，并不完全存在。

我无法使上一个和下一个按钮起作用。我想拥有它，所以它将下一张照片加载到容器中，再次等待它加载然后淡入。这是我到目前为止的内容，这是jsbin中的一个演示http://jsbin.com/esiduz/10/edit

JS

function fadeIn(obj) {
    $(obj).fadeIn(1000);
}

$(".photo").click(function() {
    var id = $(this).attr('id');
    $('#preload').prop('src',   
    'http://www.klossal.com/klossviolins/instruments/violins/full/' + id + '.jpg');

    fadeIn('#' + id);

$("#next").click(function() {  
  var id_a = $(id).next().attr('id');

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

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



  $("#prev").click(function() {  
  var id_b = $(id).prev().attr('id');

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

  fadeIn('#' + id);

});

});

CSS

ul {
  list-style-type: none;
}

.UNH_album li{
  float:left;
  padding:10px;
}

#prev {
  width:50px;
  height:50px;
  background:green;
  float:left;
}

#next {
  width:50px;
  height:50px;
  background:blue;
  float:left;
}

HTML

<div id="loading_box_container">
   <div id="loading_box">
        <img id="preload" onload="fadeIn(this)" src="#" style="display:none;"/>
</div>

<div id="nav">
  <div id="prev"></div>
  <div id="next"></div>
  <br style="clear:both;">
</div>

</div>  


<ul class="UNH_album">
  <li id="DanteBalboni_1918" class="photo">
    <img src="http://www.klossal.com/klossviolins/instruments/violins/DanteBalboni_1918.jpg">
</li>
<li id="KarlWurm_1978" class="photo">
    <img src="http://www.klossal.com/klossviolins/instruments/violins/KarlWurm_1978.jpg">
</li>
<li id="KarlGramm_1923" class="photo">
    <img src="http://www.klossal.com/klossviolins/instruments/violins/KarlGramm_1923.jpg">
</li>
</ul>

Answer 1

我遇到的问题是变量定义，我需要使用全局变量，它最终看起来像这样：'

答案是全局变量，所以它最终是这样的：

$(".photo").click(function() {
    id = $(this).attr('id');
});

$("#next").click(function() {  
      var id_a = $('#' + id).next().attr('id');
      id = id_a;
});

$("#prev").click(function() {  
      var id_b = $('#' + id).prev().attr('id');
      id = id_b;
});

jquery编码照片库的上一个和下一个按钮

1 个答案: