Slideshow di immagini in background con javascript html e css

In questo post vedremo come creare uno Slideshow di immagini in background con javascript html e css da impostare come sfondo fullscreen di un sito web.

Slideshow di immagini in background con javascript html e css

Cominciamo con il foglio si stile css da assegnare al tag body

<style>
	body,html {height: 100%; margin: 0; padding:0;}
	body
	  {
		background-position: center;
		background-repeat: no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	  }
</style>

Creiamo la funzione javascript, con i relativi parametri, che si occuperà di visulizzare la slideshow di immagini in background

<script>
	// Intervallo tra le immagini (in millisecondi)
	var speed = 3500;
	
	/* Array dei percorsi delle immagini */
	var images = new Array();
	images[0] = "img/slide/slide1.jpg"; //assegnamo la 1° immagine
	images[1] = "img/slide/slide2.jpg"; //assegnamo la 2° immagine
	images[2] = "img/slide/slide3.jpg"; //assegnamo la 3° immagine
	
	// Preassegnamo il percorso delle immagini ad un Array di oggetti Image()
	var imagePath = new Array();
	for (i = 0; i < images.length; i++)
	{
	  	imagePath[i] = new Image();
	  	imagePath[i].src = images[i];
	}

	var nrImg = 0; //assegno come immagine di partenza la prima dell'array images

	function runBodySlide()
	{
		document.body.background = imagePath[nrImg].src; //assegno l'immagine di background
		nrImg++; //incremento il numeo dell'immagine (posizione nell'array)
		if (nrImg > (images.length -1) )
			nrImg = 0;
		setTimeout('runBodySlide()', speed);
	}
			
	if (document.all || document.getElementById)
	  window.onload = runBodySlide();
</script>

Questo il codice completo

<!doctype html>
<html lang="it">
	<head>
		<meta charset="utf-8">
		<title>Demo Slideshow di immagini in background con javascript html e css - Lelezapp</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="Demo Slideshow di immagini in background con javascript html e css - Lelezapp"/>
		<link rel="canonical" href="https://www.lelezapp.it/" />

		<style>
			body,html {	height: 100%; margin: 0; padding:0;}
			body{
				/* Center and scale the image nicely */
				background-position: center;
				background-repeat: no-repeat;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
				background-size: cover;
				}
		</style>

	</head>
	<body data-rsssl=1>
		<br><br>
		<a href='lelezapp.it'>lelezapp.it</a>
		<br>

		<script>
			// Intervallo tra le immagini (in millisecondi)
			var speed = 3500;
			
			/* Array dei percorsi delle immagini */
			var images = new Array();
			images[0] = "img/slide/slide1.jpg"; //assegnamo la 1° immagine
			images[1] = "img/slide/slide2.jpg"; //assegnamo la 2° immagine
			images[2] = "img/slide/slide3.jpg"; //assegnamo la 3° immagine

			// Preassegnamo il percorso delle immagini ad un Array di oggetti di tipo Image()
			var imagePath = new Array();
			for (i = 0; i < images.length; i++)
			{
			  imagePath[i] = new Image();
			  imagePath[i].src = images[i];
			}

			var nrImg = 0; //assegno come immagine di partenza la prima dell'array images

			function runBodySlide()
			{
				document.body.background = imagePath[nrImg].src; //assegno l'immagine di background
				nrImg++; //incremento il numeo dell'immagine (posizione nell'array)
				if (nrImg > (images.length -1) )
					nrImg = 0;
				setTimeout('runBodySlide()', speed);
			}
			
			if (document.all || document.getElementById)
			  window.onload = runBodySlide();
		</script>
		
	</body>
</html>

Il codice è abbastanza commentato, per altri chiarimenti non esitate a scrivere nei commenti.

A presto 😉

[...] <style> body,html { height: 100%; margin: 0; padding:0;} body{ /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; transition: background 0.5s linear; -webkit-transition: background 1.5s linear; } </style> [...]

Federico

16 Dicembre 2021 alle 12:55

Salve, come posso cambiare l’effetto della transizione delle immagini?

Rispondi

lelezapp

16 Dicembre 2021 alle 14:59

Ciao Federico,

per avere un effetto di transizione, tra le immagini, puoi aggiungere transition come proprietà del css legato al tag body:

per un effetto fade tra le immagini dovrebbe andare bene aggiungere:

transition: background 0.5s linear;

sostituendo il codice, presente in questo post, con questo:

Per maggiori info sulla proprietà transition ti rimando a questo link.

Raffaele

Slideshow di immagini in background con javascript html e css

Slideshow di immagini in background con javascript html e css

2 commenti su “Slideshow di immagini in background con javascript html e css”

Lascia un commento Annulla risposta