Creare uno slideshow di immagini con CSS

Questo è uno dei metodi più semplici che ho trovato per realizzare questo slideshow, l’html rimane molto intuitivo e rimane l’import di un file .js, che non complica il codice.
Vorrei chiarire che non è Java ma JavaScript, che -somiglianza del nome a parte- sono due cose completamente diverse.
Fammi sapere quando riesci a trovare una soluzione usando solo i CSS.

Ciao, cosa non hai capito in particolare? Quali informazioni ti servono?

ciao, sono un po’ ignorante in questo campo ma cerco di migliorarmi.
come puoi vedere nel link della mia pagina web ho usato aruba nuke ma adesso vorrei inserire una slideshow di immagini.
ho trovato la tua guida per caso…e s embra molto semplice peccato che non so come importare un file javascript….
puoi aiutarmi?
grazie
lisa

Ad ogni modo sono d’accordo con Deno che anche se sbaglia scambiando javascript per java ha pienamente ragione su una cosa: qui di CSS non c’è nemmeno l’ombra… è tutto basato su js…
Quindi il titolo è assolutamente fuorviante!
Davvero un bel codice cmq

ho provato il codice, ma mi da un problema: mi mette l’immagine 1, e afianco l’immagine 2 sdoppiata, che cambia a scatti. io vorrei che ci fosse solo un immagine per volta, il codice implementato nell’Html è il seguente:

Untitled

var gblPhotoShufflerDivId = “photodiv”;
var gblPhotoShufflerImgId = “photoimg”;
var gblImg = new Array(
“foto2.jpg”,
“foto3.jpg”,
“foto4.jpg”,
“foto5.jpg”,
“foto6.jpg”,
“foto7.jpg”,
“foto8.jpg”,
“foto1.jpg”);
var gblPauseSeconds = 2.00;
var gblFadeSeconds = 1.45;
var gblRotations = 100;

var gblDeckSize = gblImg.length;
var gblOpacity = 100;
var gblOnDeck = 0;
var gblStartImg;
var gblImageRotations = gblDeckSize * (gblRotations+1);

window.onload = photoShufflerLaunch;

function photoShufflerLaunch()
{
var theimg = document.getElementById(gblPhotoShufflerImgId);
gblStartImg = theimg.src; // save away to show as final image
document.getElementById(gblPhotoShufflerDivId).style.backgroundImage=’url(‘ + gblImg[gblOnDeck] + ‘)’;
setTimeout(“photoShufflerFade()”,gblPauseSeconds*1000);
}

function photoShufflerFade()
{
var theimg = document.getElementById(gblPhotoShufflerImgId);
// determine delta based on number of fade seconds
// the slower the fade the more increments needed
var fadeDelta = 100 / (30 * gblFadeSeconds);
// fade top out to reveal bottom image
if (gblOpacity < 2*fadeDelta )
{
gblOpacity = 100;
// stop the rotation if we're done
if (gblImageRotations < 1) return;
photoShufflerShuffle();
// pause before next fade
setTimeout("photoShufflerFade()",gblPauseSeconds*1000);
}
else
{
gblOpacity -= fadeDelta;
setOpacity(theimg,gblOpacity);
setTimeout("photoShufflerFade()",30); // 1/30th of a second
}
}

function photoShufflerShuffle()
{
var thediv = document.getElementById(gblPhotoShufflerDivId);
var theimg = document.getElementById(gblPhotoShufflerImgId);
// copy div background-image to img.src
theimg.src = gblImg[gblOnDeck];
// set img opacity to 100
setOpacity(theimg,100);
// shuffle the deck
gblOnDeck = ++gblOnDeck % gblDeckSize;
// decrement rotation counter
if (–gblImageRotations < 1)
{
// insert start/final image if we're done
gblImg[gblOnDeck] = gblStartImg;
}
// slide next image underneath
thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';
}

function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}

Potete aiutarmi?
Grazie

Ciao,

>1. è possibile utilizzare anche immagini .png con bg trasparente??

Si, l’ho usato in passato con PNG trasparenti.

>2. come posso impostare la dimensione e i margini del div?sempre con css?

Esatto, applicandoli all’elemento div#photodiv

Ciao ho fatto come mi hai detto e funziona tutto alla grande sia quindi per le proprietà del div, sia per l utilizzo delle immagini .png.
Ora pero c è un problemino ovvero, utilizzando dei png con sfondo trasparente, sotto l’immagine in primo piano, compare la seconda immagine che in viene precaricata. Come posso fare in modo che quest ultima rimanga “nascosta”?
spero di essere stato chiaro

Per rispondere a davide io ho risolto ponendo l’immagine da inserire in tutto lo spazio possibile, cioè io ad esempio ho fatto un layout con i div e all’interno di uno di questi div ho inserito una tabella di 500px nel quale inserire lo slideshow, quindi ho fatto le immagini a 500px e quel difetto che tu riportavi non si presenta.
Sarà un metodo maccheronico ma credo che non ci siano altre soluzioni!