All geek questions in one place

How to rotate and fade background images using javascript / ASP.NET / CSS

I need the random disappearance of background images.

This will be a synchronized function, for example, once every 5 seconds.
I need to do this using ASP.NET, Javascript, CSS, or all three.

Please help me guys. Thanks.

+4
source share
3 answers

Loop, jQuery plugin - a very flexible solution for rotating images: http://malsup.com/jquery/cycle/

+5
source

This is the answer: ignore the guys by doing a more accurate Google search. I have 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 here .

+3
source

Just found a tutorial on how to do this using CSS images and jQuery in ...
http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html

It seems to be in the depths. We will try to use it for the project that I am currently undertaking. Will report on how this happened.

Change 1

The above referenced jQuery seems to have addressed my issue when the jQuery Cycle plugin failed. Take a look at http://egdata.com/baf/ for an example. The main problem was that the slide show contained slides with a width of 1,500 pixels, where the page width was 960 pixels.

For some reason, the jQuery Cycle plugin adds a CSS style property for width when displaying the current slide. It initially looked correct, but crashed when resizing the browser window. The loop seems to set the width of the slides on load, and in my case I need the width to stay 100% instead of the actual pixel width of the window. http://egdata.com/baf/index_cycle.html

0
source

Source: https://habr.com/ru/post/1277272/

More articles:


All Articles