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?
[HTML] Effetto fade su ogni immagine contenute in uno slider
- Creatore Discussione Francesco Ferrai
- Data di inizio
Senza vedere il codice completo della galleria o la pagina online, sicuramente non possiamo dirti nulla
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:
ciao
quando posti del codice racchiudilo tra gli appositi bccode (riga formattazione del post: inserisci-> codice e seleziona quale)
quando posti del codice racchiudilo tra gli appositi bccode (riga formattazione del post: inserisci-> codice e seleziona quale)
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.
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
Ah, allora provvedo subito a correggerlo! Ti ringrazio 
Ma quindi c'è un modo per ottenere l' effetto fade a cui puntavo?
Ma quindi c'è un modo per ottenere l' effetto fade a cui puntavo?
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:
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.
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
