1

我正在尝试制作照片库。大照片容器开始为空，当您单击缩略图时，它使用 ID 将全尺寸照片加载到容器中，并且淡入淡出功能确保在淡入淡出之前加载它。画廊的这部分工作正常，但它的上一个和下一个按钮不完全在那里。

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

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>
4

1 回答 1

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;
});
于 2013-02-14T02:28:13.993 回答