将锚标记添加到简单的jQuery侧演

我正在使用snook.ca脚本之一进行简单的幻灯片演示。在这里它简单地说：将锚标记添加到简单的jQuery侧演

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

来源

2010-03-02 Zoheir

标记是这样的，或者你需要脚本来制作标记吗？ – 2010-03-03 00:05:53

标记已设置，只需要更改脚本以适应标记。 – Zoheir 2010-03-03 00:37:51

注意：您在第一个img标签中反复使用'bwidth'而不是'width'，所以我会假设它在您的（测试？）标记中。 – 2010-03-03 00:48:47

从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严格。适用于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>

来源

2010-03-03 00:54:42

@DN：我也尝试过，并且由于某种原因，脚本无法正常工作。就像褪色效果消失了一样。它只切换第一张图片，过了一段时间图片消失。 – Zoheir 2010-03-03 01:00:01

已更新。现在为我工作。让我知道。 – 2010-03-03 01:24:19

@DN：很好，但是淡入效果不起作用。至少不是在Firefox中！ – Zoheir 2010-03-03 01:30:13

如果你可以编辑“淡入”的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内，链接将被遵循。

来源

2010-03-03 00:05:30

是的，我已经尝试过，但不幸的是它不工作！ – Zoheir 2010-03-03 00:15:58

你想与锚标记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); 
});

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

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

注意上面的例子假设你有相同的你做图像时的链接数量，以及它们的顺序是否正确。

来源

2010-03-03 00:14:48 karim79

你的第二个例子更接近我的解决方案。但是，每个图像都有链接网址。如何将链接关联到每个图像？也许是一个数组？ – Zoheir 2010-03-03 00:46:13

我在第三个例子中引用了你的评论。我希望这是有帮助的。 – karim79 2010-03-03 00:53:06

将锚标记添加到简单的jQuery侧演

回答

相关问题