javascript / jquery: alla ricerca di script di image-sbiadimento
-
25-09-2019 - |
Domanda
Sto cercando uno script leggero (puro javascript preferito) - che dovrebbe essere per intoppi dissolvenza una sequenza di immagini in a vicenda (= immagine carosello). dovrebbe anche essere possibile eseguire diverse istanze (e quindi dovrebbe essere uno script prototipo), Come per esempio: - bandiera sito: dissolvenza 3 immagini una dopo l'altra - contenuto principale: 3 gallerie, ognuna dissolvenza 3-5 immagini
tutte le raccomandazioni che script per utilizzare a tale scopo?
grazie!
Soluzione
Ho usato il jQuery CrossSlide plug e funziona bene.
Altri suggerimenti
Ciao ho scritto un semplice script che fa uso di jQuery .fadeOut () e .fadeIn () metodi insieme con poche righe di HTML e CSS. Con gli ID per gli elementi di immagine numerate da 1 a n l'algoritmo può facilmente scorrere l'immagini e ricominciare quando si arriva all'ultima immagine. Potrebbe essere facilmente adattato per rendere le transizioni avvengono automaticamente dopo un certo ritardo di tempo invece di sparare su un pulsante. Fatemi sapere se questo aiuta. Ecco il codice:
<style type="text/css">
#images{ overflow:auto; }
.current{ display:inline; }
.hidden{ display:none; }
</style>
<script type="text/javascript" >
function doFade(current){
var speed = 500;
next = $("#"+(parseInt(current.attr("id")) + 1));
if(next.length <= 0) next = $("#1");
current.fadeOut(speed,
function fadeNextIn(){
current.attr("class", "hidden");
next.fadeIn(speed,
function afterFadeNextIn(){
next.attr("class","current");
}
);
}
);
}
$(document).ready(
function () {
$("#btnNext").click(
function(){
doFade($("#images .current"));
}
);
}
);
</script>
<div id="images">
<img id="1" title="image 1" alt="image 1" src="1.jpg" class="current" />
<img id="2" title="image 2" alt="image 2" src="2.jpg" class="hidden" />
<img id="3" title="image 3" alt="image 3" src="3.jpg" class="hidden"/>
<img id="4" title="image 4" alt="image 4" src="4.jpg" class="hidden"/>
</div>
<input id="btnNext" type="button" value="next" />