在简单的jQuery幻灯片中添加锚点标签

Question

在简单的jQuery幻灯片中添加锚点标签

4

我正在使用 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/>标签已经提供给我，我无法控制它。

- Mazzi

标记就是那样的吗，还是你需要脚本来使标记也变成那样？ - Nick Craver

标记已设置，只需要更改脚本以适应标记。 - Mazzi

注意：在第一个img标签中，您多次使用了“bwidth”而不是“width”，因此我会认为它在您的（测试？）标记中。 - user241244

@DN：是的，在复制粘贴时出了一些问题...已经修复了。 - Mazzi

3个回答

1

你想要用锚点标签包装图片吗？这些锚点从哪里来？假设你将把它们放在一个数组中：

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];
    });
});

请注意，上述示例假定您具有与图像相同数量的链接，并且它们按正确顺序排列。

- karim79

您的第二个示例更接近于我的解决方案。不过，对于每个图像，都有一个链接URL。我如何将每个图像的链接与之关联？也许使用数组？ - Mazzi

我增加了第三个例子以回应您的评论。希望它有所帮助。 - karim79

0

如果您可以编辑“fadein”中的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>内部，链接仍将被跟踪。

- Gordon Gustafson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user241244 · Accepted Answer

根据CrazyJugglerDrummer提供的方法，您需要隐藏并循环使用标签而不是标签。否则，您将会在不存在next('img')时寻找。

更新：看起来这是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>