背景幻灯片-Jquery
我正在尝试创建一个幻灯片，它将在背景中的一个DIV中运行，同时在上面有链接。我遇到的问题是，当我使用fadeIn和fadeOut JQuery函数在图片中转换时，链接也会淡出。有没有办法只使背景图像褪色？我的代码如下：背景幻灯片-Jquery,jquery,slideshow,Jquery,Slideshow,我正在尝试创建一个幻灯片，它将在背景中的一个DIV中运行，同时在上面有链接。我遇到的问题是，当我使用fadeIn和fadeOut JQuery函数在图片中转换时，链接也会淡出。有没有办法只使背景图像褪色？我的代码如下： <html> <head> <script type="text/javascript" src="jquery.js"> var bgimage=new Array() bgimage[0] = 'bg_pic2.jpg'; bgim
<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>
var bgimage=新数组（）
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
函数t（）
{
如果（abc）
如果将文本与图像分开放置，应该能够获得想要的效果。这样，淡出图像DIV不会淡出文本。
包含文本和图像的div应具有相对定位，两个子div具有绝对定位。文本div应具有比图像div更高的z索引，以确保文本“高于”图像 尝试以下方法： <body> <div id="container" > <div id="mainpic" class="mainpic" style="position:relative;"> <div style="position: absolute; top: 0px; left: 0px; height: 531px; width: 400px"></div> <div id="text" style="position: absolute; top: 0px; left: z-index=1"> <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> </div> </body>
请注意，我调整了图像div的宽度。您可能希望将其设置为图像的实际宽度。我能够在Firefox和Chrome中实现这一点，但IE将图像推到了右侧
<div style="width:755px; height:507px; border: #888 5px solid;">
<div id="container" >
<div id="mainpic" class="mainpic" style="position: absolute">
</div>
<div id="links" style="position: relative">
<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>
</div>