Background slideshow - Jquery
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开发者_如何学C").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>
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.
I was able to get this to work in Firefox and Chrome, but IE pushed the image WAY out to the right. . .
<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>
加载中,请稍侯......
精彩评论