How to rotate and fade background images in and ou

2020-07-18 04:14发布

问题:

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.

Please help me out here guys. Thank you.

回答1:

Cycle, a jQuery plugin is a very flexible image rotating solution: http://malsup.com/jquery/cycle/



回答2:

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.com
1000s of free ready to use scripts, tutorials, forums.
Author: Steve S - http://jsmadeeasy.com/ 
-->

<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.com/images/blue_ball0.gif"
bgimages[1]="http://js-examples.com/images/red_ball0.gif"
bgimages[2]="http://js-examples.com/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.com'>JS-Examples.com</a></center> 
</body>
</html>

Found it here.



回答3:

Just found a tutorial on how to do this with CSS background images and jQuery at...
http://www.marcofolio.net/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.com/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.com/baf/index_cycle.html