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

发布于 2024-08-24 03:47:27 字数 1086 浏览 9 评论 0原文

我正在使用 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>

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

原文

I am using one of snook.ca script for simple slideshow. Here it is in a nutshell:

<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>

Now I have tried to make these images clickable at while in slideshow. So my markup will be something like:

<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>

How do I achieve this functionality without making the script too complicated. Please note that <img/> tags are provided to me and I have no control over it.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

因为看清所以看轻 2024-08-31 03:47:27

使用 CrazyJugglerDrummer 的尝试，您会想要隐藏然后循环 a，而不是 img。否则，您将在不存在的地方寻找 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>

Working from CrazyJugglerDrummer's try, you'd want to hide and then cycle the as, not the imgs. Otherwise you'll be looking for next('img') where it doesn't exist.

update Seems like it's a mix of CSS and js. I have it working now, like so:

<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>

with 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; }

You have to make sure your anchors and images are displayed block, and that the absolute position is set on your anchor. Also you need to further specify the :first-child so as not to fade the image.

further update Using 1.3.2 jQuery and XHTML Strict. Works in FF, IE6 - 8, Safari, Chrome, and 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>

回复收藏 0 原文

淑女气质 2024-08-31 03:47:27

您想用锚标记包裹图像吗？锚从哪里来？假设您将它们放在一个数组中：

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

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

You want to wrap the images with anchor tags? Where do the anchors come from? Assuming you will be placing them within an array:

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

or have I completely misunderstood the question? If you just need them to be clickable can't you just assign a click handler to each one, i.e.:

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

or:

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

Note that the above examples assume that you have the same number of links as you do images, and that they are in the correct order.

回复收藏 0 原文

感受沵的脚步 2024-08-31 03:47:27

如果您可以在“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>

您选择并淡化第一个子项，即现在的。即使您仅淡入图像，只要它们位于内，链接就会被跟踪。

If you can edit the HTML in 'fadein', change it to what you listed and it should work.

<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>

You select and fade the first child, which is now the <a>. Even if you faded in the just the images, as long as they're inside <a>s the link will be followed.

回复收藏 0 原文

~没有更多了~