Jquery 库下一个/上一个按钮

Posted 2023-02-25

【中文标题】Jquery 库下一个/上一个按钮

【英文标题】：Jquery gallery next/previous buttons

【发布时间】：2011-12-13 13:22:05

【问题描述】：

半年前我做了一个 jquery 库（SO 社区帮了我很多，因为我对 js/jquery 不够熟悉）现在我想在这个库中添加下一个/上一个按钮。我尝试将它与其他画廊结合使用，但没有任何效果。

这里是js：

<script type="text/javascript">
function showPic (whichpic) 
if (document.getElementById) 
$('#actimg').fadeOut(170);
setTimeout(function() 
document.getElementById('actimg').src = whichpic.href; 
$('#actimg').fadeIn(170);
, 170);
return false; 
 else 
return true;
  

</script>

和html：

<img id="actimg" src=""    />

<a onclick="return showPic(this)" href="example_1.jpg">
<img   src="example_1.jpg"  />
</a>

<a onclick="return showPic(this)" href="example_2.jpg">
<img   src="example_2.jpg"  />
</a>

<a onclick="return showPic(this)" href="example_3.jpg">
<img   src="example_3.jpg"  />
</a>

画廊看起来像http://www.rafsimons.com/collections/aw-11/，但它不是flash，也没有我现在想要制作的下一个/上一个按钮。提前感谢您的帮助。

【参考方案1】：

首先为你的所有拇指添加一个类属性（<a> 标签），以便它们可以很容易地从 jQuery 中引用：

<a class="gallery_item" onclick="return showPic(this)" href="example_1.jpg">
<img   src="example_1.jpg"  />
</a>
...

我们需要一种方法来知道哪个是当前图像。我们可以将该信息存储在您的 <a> 标签本身的自定义属性中。为此，请修改您的 showPic 函数，例如：

function showPic (whichpic) 
  if (document.getElementById) 
    $('.gallery_item').removeAttr('current'); // <- remove 'current' attribute from all thumbs
    $('#actimg').fadeOut(170);
    setTimeout(function() 
      document.getElementById('actimg').src = whichpic.href; 
      $('#actimg').fadeIn(170);
      $(whichpic).attr('current', '1'); // <- set this one as current
    , 170);
    return false; 
   else 
    return true;
  

现在为下一个/上一个按钮添加 2 个链接并将它们放置在适当的位置。将他们的 ID 设为“下一个”和“上一个”

<a href="#" id="prev" onclick="return nextPic()">Prev</a>

<a href="#" id="next" onclick="return prevPic()">Next</a>

现在添加 2 个 js 函数 nextPic() 和 prevPic() 比如：

function nextPic() 
  var current = null;
  $('.gallery_item').each(function() 
    if($(this).attr('current')=='1') 
    current = $(this);
    return false;
    
  );
  if(current!=null) 
    if(current.parent().next().length!=0) 
    showPic(current.parent().next().find('.gallery_item')[0]); // <- show next pic
    
    else 
    showPic($('.gallery_item:first')[0]); // if no next pic, show first pic
    
  
  return false;


function prevPic() 
  var current = null;
  $('.gallery_item').each(function() 
    if($(this).attr('current')=='1') 
    current = $(this);
    return false;
    
  );
  if(current!=null) 
    if(current.parent().prev().length!=0) 
    showPic(current.parent().prev().find('.gallery_item')[0]); // <- show next pic
    
    else 
    showPic($('.gallery_item:last')[0]); // if no next pic, show first pic
    
  
  return false;

也添加这个，默认初始化第一个图像为当前图像。

$().ready(function() 
  $('.gallery_item:first').attr('current', '1');
);

【讨论】：

感谢您的解决方案，但它不能正常工作。我在我的网站（www.stinak.com 上的任何画廊）中实现了您的代码，如果您查看并尝试修复它，我将不胜感激。由于我不擅长 js，所以我无法自己修复它，或者至少无法说出那里出了什么问题。

从您的代码中，我可以看到每个拇指（ 标签）都包含在 标签中。我最初给出的答案假设 标签是兄弟姐妹。我在答案中更新了 nextPic() 和 prevPic() 函数。还要复制答案中的 $().ready(..) 部分并将其放入您的脚本中（例如：在 nextPic() 和 prevPic() 函数之后）。如果它不起作用，请告诉我。

非常感谢！它有一些错误，但我能够修复它们，现在它可以完美运行。再次感谢。