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