I need to randomly fade my background images in and out.
It will be a timed function, like once every 5 seconds. I need to do it with ASP.NET, Javascript, CSS or all three.
I need to randomly fade my background images in and out.
It will be a timed function, like once every 5 seconds. I need to do it with ASP.NET, Javascript, CSS or all three.
Share Improve this question edited Jan 22 at 9:57 halfer 20.4k19 gold badges108 silver badges201 bronze badges asked Sep 28, 2008 at 16:00 SpoiledTechie.SpoiledTechie. 10.7k23 gold badges79 silver badges100 bronze badges3 Answers
Reset to default 5Cycle, a jQuery plugin is a very flexible image rotating solution: http://malsup./jquery/cycle/
This is the Answer: never mind guys, after making a bit more exact search on Google. I found a good solution.
<html>
<head>
<!--
This file retrieved from the JS-Examples archives
http://www.js-examples.
1000s of free ready to use scripts, tutorials, forums.
Author: Steve S - http://jsmadeeasy./
-->
<style>
body
{
/*Remove below line to make bgimage NOT fixed*/
background-attachment:fixed;
background-repeat: no-repeat;
/*Use center center in place of 300 200 to center bg image*/
background-position: 300 200;
}
</style>
<script language="JavaScript1.2">
/* you must supply your own immages */
var bgimages=new Array()
bgimages[0]="http://js-examples./images/blue_ball0.gif"
bgimages[1]="http://js-examples./images/red_ball0.gif"
bgimages[2]="http://js-examples./images/green_ball0.gif"
//preload images
var pathToImg=new Array()
for (i=0;i<bgimages.length;i++)
{
pathToImg[i]=new Image()
pathToImg[i].src=bgimages[i]
}
var inc=-1
function bgSlide()
{
if (inc<bgimages.length-1)
inc++
else
inc=0
document.body.background=pathToImg[inc].src
}
if (document.all||document.getElementById)
window.onload=new Function('setInterval("bgSlide()",3000)')
</script>
</head>
<body>
<BR><center><a href='http://www.js-examples.'>JS-Examples.</a></center>
</body>
</html>
Found it here.
Just found a tutorial on how to do this with CSS background images and jQuery at...
http://www.marcofolio/webdesign/advanced_jquery_background_image_slideshow.html
Seems fairly in depth. Going to try to use it for a project I'm currently undertaking. Will report on how it turned out.
Edit 1
The above referenced jQuery seems to have addressed my issue where the jQuery Cycle plugin could not. Look at http://egdata./baf/ for an example. The main issue was that the slideshow contained slides that were 1500px wide where the page width is 960px.
For some reason, the jQuery Cycle plugin adds a css style property for width when displaying the current slide. Initially it looked correct, but fails when the browser window is resized. Cycle seems to set the width of the slides on load, and in my case, I need the width to remain 100% instead of the actual pixel width of the window. http://egdata./baf/index_cycle.html