Question

我在JavaScript中有这个简单的幻灯片：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>

使用CSS：

<style>
body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}

.fadein { position:relative; height:332px; width:500px; }
.fadein img { position:absolute; left:0; top:0; }
</style>

和HTML：

<body>
<div class="fadein">
<img src="">
<img src="">
<img src="">
</div>
</body>

我还没想出如何添加链接到滑动的图像。我尝试在html页面的主体中为每个图像添加一个锚标记，例如<a href=""><img src=""></a>，但是一切都搞砸了。

请给我一个解决方案，了解如何使用JS为图像提供外部链接。

谢谢。

Answer 1

我知道这个问题前一段时间已被问过，但由于我遇到了同样的问题，我会回答。

这是工作脚本：

$(function(){
$('.fadein a:gt(0)').hide();
setInterval(function(){$('.fadein :first').fadeOut().next('a').fadeIn().end().appendTo('.fadein');}, 10000);
});

：首先需要替换第一个孩子，因为有多个孩子并且选择器需要更改为a。该链接可以添加到div中，如下所示：

<div class="fadein">
<a href="http://link.com"><img src=""></a>
<a href="http://link2.com"><img src=""></a>
<a href="http://link3.com"><img src=""></a>
</div>

我正在使用相同的代码，所以可以说我测试了它并且它正在运行

Answer 2

您可以遵循此实施：

http://jsfiddle.net/fenderistic/sT4Me/

这使用jquery的.click(function(){});，并在单击图像时更改window.location.href。您可以为每张图片指定id，然后根据该图片更改位置，但这是您的偏好。

$('img').click(function(){

    window.location.href="google.com";

});

OR

您可以抛出一个onclick事件，从那里更改window.location.href。即。

<img id="pic1" width=100px src="" onclick="window.location.href='google.com'"/>

JavaScript淡出幻灯片 - 图片链接

2 个答案: