背景幻灯片 - Jquery
我正在尝试创建一个幻灯片，该幻灯片将在后台的 DIV 中运行，同时其顶部有链接。我遇到的问题是，当我使用 fadeIn 和 fadeOut 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>
I'm trying to create a slideshow that will run in a DIV in the background while having links on top of it. The problem that I'm running into is that when I'm transitioning through pictures using the fadeIn and fadeOut JQuery functions, it is fading out the links as well. Is there a way to fade only the background image? My code is below:
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果将文本放在与图像不同的 DIV 中，您应该能够获得所需的效果。这样淡出图像 div 不会淡出文本。
包含文本和图像的 div 应该具有相对定位，而两个子 div 则具有绝对定位。文本 div 的 z 索引应高于图像 div，以确保文本位于图像“上方”。
尝试类似的操作：
<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 的宽度。您可能想将其设置为图像的实际宽度。
You should be able to get the effect you want if you put the text in a separate DIV from the image. That way fading out the image div won't fade out the text.
The div containing the text and images should have a relative positioning with the two child divs having absolute positioning. The text div should have a higer z-index than the image div to make sure that the text is "above" the images.
Try something like:
<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>Note that I adjusted the width of your image div. You probably want to set that to the actual width of your images.
我能够在 Firefox 和 Chrome 中使用它，但 IE 将图像推到了右侧。 。 。
I was able to get this to work in Firefox and Chrome, but IE pushed the image WAY out to the right. . .