将锚标记添加到简单的jQuery sideshow

Question

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

Answer 1

从CrazyJugglerDrummer的尝试开始，你想隐藏然后循环a s，而不是img s。 否则你将寻找不存在的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>

Answer 2

你想用锚标签包装图像？ 锚是从哪里来的？ 假设您将它们放在一个数组中：

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

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

Answer 3

如果您可以在'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>之内，就会跟随链接。

将锚标记添加到简单的jQuery sideshow

问题描述

3 个解决方案

解决方案1
2 已采纳 2010-03-03 00:54:42

解决方案2
1 2010-03-03 00:14:48

解决方案3
0 2010-03-03 00:05:30

将锚标记添加到简单的jQuery sideshow

问题描述

3 个解决方案

解决方案1 2 已采纳 2010-03-03 00:54:42

解决方案2 1 2010-03-03 00:14:48

解决方案3 0 2010-03-03 00:05:30

解决方案1
2 已采纳 2010-03-03 00:54:42

解决方案2
1 2010-03-03 00:14:48

解决方案3
0 2010-03-03 00:05:30