我试图创建一个幻灯片,将在背景中的DIV中运行,同时有链接在它的顶部。我遇到的问题是,当我使用fadeIn和fadeOut JQuery函数转换图片时,它也会淡出链接。有没有办法淡化背景图像?我的代码如下:背景幻灯片 - jquery
<html>
<head>
<script type="text/javascript" src="jquery.js">
var bgimage=new Array()
bgimage[0] = 'bg_pic2.jpg';
bgimage[1] = 'bg_pic3.jpg';
bgimage[2] = 'bg_pic4.jpg';
bgimage[3] = 'cbg_pic5.jpg';
bgimage[4] = 'bg_pic1.jpg';
var abc=-1
function t()
{
if (abc<bgimage.length-1)
{
abc++;
}
else
{
abc=0;
}
document.getElementById("mainpic").style.backgroundImage = 'url("'+bgimage[abc]+'")';
$('#mainpic').fadeIn();
$('#mainpic').delay(3900).fadeOut();
}
window.onload = load;
function load()
{
$('#mainpic').hide();
$('#mainpic').delay(500).fadeIn();
document.getElementById("mainpic").style.backgroundImage = 'url(css/images/bg_pic1.jpg)';
setInterval("t()",5000); //change every 4 seconds, can be changed.
$('#mainpic').delay(3600).fadeOut();
}
//-->
</script>
</head>
<body>
<div id="container" >
<div id="mainpic" class="mainpic">
<div style="float:right; height: 531px; width: 20px"></div>
<br />
<div class="coaches"><a href=""></a></div>
<br />
<br />
<br />
<br />
<div class="hours"><a href=""></a></div>
<br />
<br />
<br />
<br />
<div class="pics"><a href=""></a></div>
<br />
<br />
<br />
<br />
<div class="blog"><a href=""></a></div>
</div>
</div>
</body>
我试过你的代码,它仍然无法正常工作。 。 。这些链接仍然与#mainpic DIV一起消失。 – user473669 2010-10-12 19:03:09
对不起,我的代码示例没有为你工作。我仍然认为问题是div如何嵌套,我认为上面的改变会解决它。如果你有Firefox的firebug插件,你可能想玩一下看DIV如何互动。你甚至可以用萤火虫“实时”修改CSS,这样也可以提供帮助。 – 2010-11-15 18:19:00