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

Francesco Ferrai

Nuovo Utente
17 Feb 2017
8
0
1
24
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
24
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.042
148
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.369
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
28
Vedi che il tuo codice non funziona. Devi mettere gallery e non solo gallery.
 

Francesco Ferrai

Nuovo Utente
17 Feb 2017
8
0
1
24
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.369
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
28
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
24
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.369
338
83
Quando vedremo il codice funzionante saremo più precisi
 

Ibernato

Utente Attivo
2 Giu 2016
70
6
8
28
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
24
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
24
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
F Creare elementi html con javascript Javascript 0
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
P HTML integrazione wordpress HTML e CSS 0
C [RISOLTO]Inserimento variabile php in input html PHP 20
L Eliminare estensione .html HTML e CSS 9
max1974 html in tooltip Javascript 0
C Risalire al php da html PHP 27
felino Esportare tabella HTML in PDF, quale libreria usare? Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
L [RISOLTO] Stampa a video risultato count in html PHP 13
V Servizio design pagina web e download in self contained html file Discussioni Varie 1
F [PHP] Form html PHP 2
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
R Aiuto sito html Offerte e Richieste di Lavoro e/o Collaborazione 3
M Estrarre dati da una select HTML PHP 3
G FORM HTML E PHP PHP 0
max1974 [HTML] Columns grid on modal form HTML e CSS 0
tomorc [HTML] Problema con scroll bar (risolto) HTML e CSS 0
F [PHP] [HTML] Tabella cambia pagina responsive PHP 8
M [PHP] [HTML] Centrare in verticale un pulsante in una tabella PHP 3
M [PHP] Istruzione "echo" all'interno di codice html PHP 2
D [HTML] Aiutino su costruzione tabella :) HTML e CSS 3

Discussioni simili