将锚标记添加到简单的 jQuery 杂耍表演答案

【问题标题】：Add anchor tag to simple jQuery sideshow将锚标记添加到简单的 jQuery 杂耍表演
【发布时间】：2011-01-22 23:53:42
【问题描述】：

我正在使用snook.ca 脚本之一进行简单的幻灯片放映。简而言之：

<div class="fadein">
    <img src="banner1.jpg" width="645" height="307"/>
    <img src="banner2.jpg" width="645" height="307"/>
    <img src="banner3.jpg" width="645" height="307"/>
</div>
<script>
    $(function(){
        $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 4000);
});
</script>

现在我尝试让这些图片在幻灯片放映时可点击。所以我的标记将是这样的：

<div class="fadein">
    <a href="yahoo.com"><img src="banner1.jpg" bwidth="645" height="307"/></a>
    <a href="google.com"><img src="banner2.jpg" width="645" height="307"/></a>
    <a href="live.com"><img src="banner3.jpg" width="645" height="307"/></a>
</div>

如何在不使脚本过于复杂的情况下实现此功能。 请注意 <img/> 标签是提供给我的，我无法控制它。

【问题讨论】：

标记是这样的，还是你需要脚本来制作这样的标记？
标记已设置，只需更改脚本以适应标记即可。
注意：你在第一个 img 标记中重复使用 'bwidth' 而不是 'width'，所以我假设它在你的（测试？）标记中。
@DN：是的，复制粘贴时出了点问题。已修复。

标签： jquery anchor slideshow

【解决方案1】：

从CrazyJugglerDrummer 的尝试开始，您想要隐藏然后循环as，而不是imgs。否则你会在不存在的地方寻找next('img')。

update 好像是 CSS 和 js 的混合体。我现在可以正常工作了，就像这样：

<div class="fadein">
  <a href="yahoo.com"><img src="banner1.jpg" width="645" height="307"/></a>
  <a href="google.com"><img src="banner2.jpg" width="645" height="307"/></a>
  <a href="live.com"><img src="banner3.jpg" width="645" height="307"/></a>
</div>
<script>
$(function(){
    $('.fadein a:gt(0)').hide();
setInterval(function(){$('.fadein a:first-child').fadeOut().next('a').fadeIn().end().appendTo('.fadein');}, 4000);
});
</script>

使用 CSS

.fadein { position:relative; width:645px; height:307px; }
.fadein a { position:absolute; left:0; top:0; display:block; text-decoration:none; }
img { border:0; display:block; }

您必须确保您的锚点和图像显示为块状，并且绝对位置设置在您的锚点上。另外你需要进一步指定:first-child，以免图像褪色。

进一步更新 使用 1.3.2 jQuery 和 XHTML Strict。适用于 FF、IE6 - 8、Safari、Chrome 和 Opera。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
  .fadein { position:relative; width:645px; height:307px; }
  .fadein a { position:absolute; left:0; top:0; display:block; text-decoration:none; }
  img { border:0; display:block; }
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function(){
  $('.fadein a:gt(0)').hide();
  setInterval(function(){$('.fadein a:first-child').fadeOut().next('a').fadeIn().end().appendTo('.fadein');}, 4000);
});
</script>
</head>
<body>
  <div class="fadein">
    <a href="yahoo.com"><img src="banner1.jpg" width="645" height="307" alt="1" /></a>
    <a href="google.com"><img src="banner2.jpg" width="645" height="307" alt="2" /></a>
    <a href="live.com"><img src="banner3.jpg" width="645" height="307" alt="3" /></a>
  </div>
</body>
</html>

【讨论】：

@DN：我也尝试过，但由于某种原因，脚本无法正常工作。就像淡入淡出效果消失了。它只切换第一张图片，过一会图片就消失了。
已更新。现在为我工作。告诉我。
@DN：很好，但是淡入淡出效果不起作用。至少不在 Firefox 中！
@Mazzi 这就是我正在测试的，它是为我准备的。它相当快，但它就在那里。
您可以通过将 .fadeIn 和 .fadeOut 编辑为 .fadeIn("slow") 或 .fadeIn(5000) 之类的内容来编辑淡入淡出的速度。

【解决方案2】：

您想wrap 带有锚标签的图像吗？锚从何而来？假设您将它们放在一个数组中：

var link = ['www.example.com', 'www.example.net'];
$("div.fadein > img").each(function(i) {
    var $anchor = $("<a></a>").attr("href", link[i]); // or $(this).attr("src") depending on what you mean
    $(this).wrap($anchor);
});

还是我完全误解了这个问题？如果您只需要它们可点击，您不能只为每个点击处理程序分配一个点击处理程序，即：

$("div.fadein > img").click(function() {
   window.location.href = $(this).attr("src"); // assuming the href is the images source
});

或：

var link = ['www.example.com', 'www.example.net'];
$("div.fadein > img").each(function(i) {
    $(this).click(function() {
        window.location.href = link[i];
    });
});

请注意，以上示例假设您拥有与图片相同数量的链接，并且它们的顺序正确。

【讨论】：

你的第二个例子更接近我的解决方案。但是，对于每个图像，都有链接 url。如何将 url 链接关联到每个图像？也许是一个数组？
我已经抛出了第三个例子来解决您的评论。希望对您有所帮助。

【解决方案3】：

如果您可以在“淡入”中编辑 HTML，请将其更改为您列出的内容，它应该可以工作。

<div class="fadein">
    <a href="yahoo.com"><img src="banner1.jpg" bwidth="645" height="307"/></a>
    <a href="google.com"><img src="banner2.jpg" width="645" height="307"/></a>
    <a href="live.com"><img src="banner3.jpg" width="645" height="307"/></a>
</div>
<script>
    $(function(){
        $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 4000);
});
</script>

您选择并淡化第一个孩子，现在是<a>。即使您只是淡入了图像，只要它们在 <a>s 内，链接就会被跟踪。

【讨论】：