[HTML] Effetto fade su ogni immagine contenute in uno slider

Francesco Ferrai

Nuovo Utente
17 Feb 2017
8
0
1
26
Ciao a tutti, sto creando uno slider in css di immagini controllato da due pulsanti(prev,next) con un semplice script in js. Volevo applicare l' effetto fade per ogni immagine ogni volta che ne viene cambiata tramite il bottone. Potreste aiutarmi?
 

Francesco Ferrai

Nuovo Utente
17 Feb 2017
8
0
1
26
si scusami, eccolo qua
HTML:
<html>
<head>
<style type="text/css">

#slider{
    position:relative;
    width:1024px;
    height:400px;
    margin:0 auto 0 auto;
    top:5%;
    padding:0;
    border:1px solid black;
}

#button_prev{
    position:absolute;
    width:50px;
    height:50px;
    top:175px;
    left:20px;
    border-radius:100%;
    background-color:#FFF;
  
    transistion-property: width, height;
    transition-duration:1s;
}

#button_next{
    position:absolute;
    width:50;
    height:50px;
    top:175px;
    right:20px;
    border-radius:100%;
    background-color:#FFF;
  
    transistion-property: width, height;
    transition-duration:1s;
}

#button_prev:hover{

    width:60px;
    height:60px;
}

#button_next:hover{

    width:60px;
    height:60px;
}


@-webkit-keyframes 'pulse' {
0% {
    opacity:0;
}

33% {
    opacity:0,7;
}

67% {

    opacity:0,3;

}

100% {
    opacity:1;
}
}

.pulsedbox {
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
}
</style>

<script>
var gallery = new Array();

gallery[0] = "rist.jpg";
gallery[1] = "rist2.jpg";
gallery[2] = "rist3.jpg";
gallery[3] = "rist4.jpg";

var i = 0;

function prev(){
        if (i == 0)
            {
                i = gallery.length - 1;
            }
        else
            {
                i--;
            }
    document.immagine.src = gallery;
}

function next(){
    if (i < gallery.length - 1)
    {
        i++;
    }
    else
    {
        i=0;
    }
    document.immagine.src = gallery;
}

</script>

</head>

<body>
    <div id="slider">
        <img src="alberi.jpg" style="width:100%; height:400px;" name="immagine" class="pulsedbox">
      
        <a href="javascript:prev()"><div id="button_prev" class="trans">
        </div></a>
      
        <a href="javascript:next()"><div id="button_next" class="trans">
        </div></a>
    </div>
</body>

</html>
 
Ultima modifica di un moderatore:

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
quando posti del codice racchiudilo tra gli appositi bccode (riga formattazione del post: inserisci-> codice e seleziona quale)
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
A me quel codice non funziona, guarda che non manchi o non sia sbagliato qualche cosa
 

Ibernato

Utente Attivo
2 Giu 2016
70
6
8
31
Vedi che il tuo codice non funziona. Devi mettere gallery e non solo gallery.
 

Francesco Ferrai

Nuovo Utente
17 Feb 2017
8
0
1
26
Penso che il motivo per cui a voi non funziona siano le immagini, visto che non ci sono. Sostituendole con altre(qualuqnue dimensione va bene tanto si adattano automaticamente al div slider) dovrebbe funzionare credo.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
dovrebbe funzionare credo.
E credi male! Quando proviamo un codice che dovrebbe contenere immagini già sappiamo che potrebbe non funzionare e allora creiamo delle immagini sostitutive. Il fatto è che il codice così come l'hai postato non funziona e per noi diventa una cosa troppo lunga per andare anche a analizzare ogni parte del codice per vedere dove è sbagliato. Comunque prova a vedere il consiglio di Ibernato
 

Ibernato

Utente Attivo
2 Giu 2016
70
6
8
31
Oltre che per le immagini, tu hai messo document.immagine.src = gallery, devi mettere
Codice:
gallery[i]
 

Francesco Ferrai

Nuovo Utente
17 Feb 2017
8
0
1
26
Ah, allora provvedo subito a correggerlo! Ti ringrazio ;)

Ma quindi c'è un modo per ottenere l' effetto fade a cui puntavo?
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Quando vedremo il codice funzionante saremo più precisi
 

Ibernato

Utente Attivo
2 Giu 2016
70
6
8
31
Ecco la soluzione:
HTML:
<html>
<head>
<style type="text/css">

#slider{
    position:relative;
    width:1024px;
    height:400px;
    margin:0 auto 0 auto;
    top:5%;
    padding:0;
    border:1px solid black;
}

#button_prev{
    position:absolute;
    width:50px;
    height:50px;
    top:175px;
    left:20px;
    border-radius:100%;
    background-color:#FFF;
 
    transistion-property: width, height;
    transition-duration:1s;
}

#button_next{
    position:absolute;
    width:50;
    height:50px;
    top:175px;
    right:20px;
    border-radius:100%;
    background-color:#FFF;
 
    transistion-property: width, height;
    transition-duration:1s;
}

#button_prev:hover{

    width:60px;
    height:60px;
}

#button_next:hover{

    width:60px;
    height:60px;
}


@-webkit-keyframes 'pulse' {
0% {
    opacity:0;
}

33% {
    opacity:0,7;
}

67% {

    opacity:0,3;

}

100% {
    opacity:1;
}
}

@keyframes 'pulse'{
        0% {
    opacity:0;
}

33% {
    opacity:0,7;
}

67% {

    opacity:0,3;

}

100% {
    opacity:1;
}
}

.pulsedbox {
-webkit-animation: pulse 2s;
animation: pulse 2s;
}
</style>

<script src="jquery-3.1.1.min.js"></script>

<script>
var gallery = new Array();

gallery[0] = "1.jpg";
gallery[1] = "2.jpg";
gallery[2] = "3.jpg";
gallery[3] = "4.jpg";

var i = 0;

function prev(){
        if (i == 0)
            {
                i = gallery.length - 1;
            }
        else
            {
                i--;
            }
   
var elm = document.getElementById('ok');
               elm.style.animation='pulse 2s';
               var newone = elm.cloneNode(true);
               newone.src = gallery[i];
               elm.parentNode.replaceChild(newone, elm);
}

function next(){
    if (i < gallery.length - 1)
    {
        i++;
    }
    else
    {
        i=0;
    }
    var elm = document.getElementById('ok');
                elm.style.animation='pulse 2s';
                var newone = elm.cloneNode(true);
                newone.src = gallery[i];
                elm.parentNode.replaceChild(newone, elm);
}

</script>

</head>

<body>
    <div id="slider">
        <img src="1.jpg" style="width:100%; height:400px;" name="immagine" class="pulsedbox" id="ok">
    
        <a href="javascript:prev()"><div id="button_prev" class="trans">
        </div></a>
    
        <a href="javascript:next()"><div id="button_next" class="trans">
        </div></a>
    </div>
</body>

</html>
 
Ultima modifica:
  • Like
Reactions: Francesco Ferrai

Francesco Ferrai

Nuovo Utente
17 Feb 2017
8
0
1
26
Ho visto il tuo link ibernato però non è esattamente quello che cerco. L' effetto fade su una singola immagine sono in grado di ricrearlo. Il mio problema è ricrearlo ogni volta che si cambia immagine nello slider.
 

Francesco Ferrai

Nuovo Utente
17 Feb 2017
8
0
1
26
Funziona perfettamente, ti ringrazio, allora mi rimane solo un piccolo problema da risolvere. Il fatto è che il sito in cui devo inserire la gallery fa riferimento a file css e js esterni. Dove devo inserire lo script src di JQuery e come gli dico che l' animazione pulse si trova su un file esterno?
 
Discussioni simili
Autore Titolo Forum Risposte Data
M [HTML] Slideshow immagini con effetto FADE HTML e CSS 2
S [HTML] Effetto su testo da togliere HTML e CSS 0
R [HTML] Effetto carousel di testo su immagine fissa HTML e CSS 2
Andrea_Ventura [HTML] Problemi con effetto hover HTML e CSS 5
A [HTML] Menu con effetto slide down HTML e CSS 0
F [HTML] Navbar interferisce con codice per effetto parallax HTML e CSS 2
S [HTML] Effetto hover in un div HTML e CSS 6
D [HTML] Sfondo-Background fisso ma non troppo con effetto in movimento HTML e CSS 4
R [HTML] Pulsante con effetto dissolvenza (fading) HTML e CSS 10
C File html con procedure javascript per creare effetto libro da sfogliare Javascript 9
A Musicare pagine html con effetto continuum Webdesign e Grafica 2
G Pagina html in stringa PHP 2
E Sostituzione Elemento Html PHP 3
G Elementi HTML HTML e CSS 1
K Visualizzare del html responsive in una Webview Sviluppo app per Android 0
T Domanda valutazione html LinkedIn 2022 pt3 HTML e CSS 7
T Domanda valutazione html LinkedIn 2023 pt2 HTML e CSS 15
T Domanda valutazione html LinkedIn 2023 pt1 HTML e CSS 1
MarcoGrazia Salvataggio HTML in database PHP 2
K posizionare variabile da pagina html all'iframe. Javascript 1
peppe0703 Come Estrarre dati da db wordpress e richiamarli in html esterno HTML e CSS 0
L problema collegamento file css con html HTML e CSS 1
D Informazioni da XAMPP su HTML PHP 0
R Immagini html HTML e CSS 2
K File audio in html, chi mi può aiutare? HTML e CSS 0
K Aiuto con file audio in html HTML e CSS 1
Antonio67 Lanciare file shell bash da html HTML e CSS 2
M Riportare in tabella HTML dati estratti con query SQL MySQL 0
G Codice html Javascript 1
M Collegamento tra form html e script php PHP 4
L Ricezione dei dati su file php da modulo html PHP 6
F Creare elementi html con javascript Javascript 3
G Appicazione HTML per inserimento dai in Database Access Microsoft HTML e CSS 0
W visualizzare solo file html e sottocartelle di una cartella PHP 1
C Dopo chiusura del tag php la stringa html va a capo PHP 1
G img html HTML e CSS 3
M Come fare un countdown in HTML? HTML e CSS 4
D Stampa a video in altra pagina html Database 3
A inserire variabile php colore in div html PHP 2
F Tv in html Offerte e Richieste di Lavoro e/o Collaborazione 1
N Script elenco file HTML HTML e CSS 5
L salvare codice html in mysql PHP 3
Cosina htaccess redirect 301 senza estensione html Web Server 6
E Errore di lettura php in html PHP 8
M HTML e PHP Offerte e Richieste di Lavoro e/o Collaborazione 3
C Form email php su pagina index.html? PHP 21
Shyson Meglio Javascript o HTML? Javascript 4
P inserimento icone social tramite html HTML e CSS 1
Z Mod_rewrite da HTML in PHP PHP 3
L Collegare un form html ad un database access Javascript 2

Discussioni simili