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

Francesco Ferrai

Nuovo Utente
17 Feb 2017
8
0
1
23
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?
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.245
322
83

Francesco Ferrai

Nuovo Utente
17 Feb 2017
8
0
1
23
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
146
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.245
322
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
27
Vedi che il tuo codice non funziona. Devi mettere gallery e non solo gallery.
 

Francesco Ferrai

Nuovo Utente
17 Feb 2017
8
0
1
23
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.245
322
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
27
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
23
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.245
322
83
Quando vedremo il codice funzionante saremo più precisi
 

Ibernato

Utente Attivo
2 Giu 2016
70
6
8
27
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
23
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
23
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?