JQuery semplice fade in e fade out immagine

C’è qualche script che posso utilizzare per creare una presentazione in cui una foto in dissolvenza e un altro lo sostituisce. Sto utilizzando l’elenco riportato di seguito per visualizzare le immagini. Gli script vedo attualmente diapositive le immagini di destra e di sinistra, ma nessuno si sbiad in fuori.

<ul class="slideshow">
<li><img src="images/image1.gif" /></li>
<li><img src="images/image2.gif" /></li>
<li><img src="images/image3.gif" /></li>
<li><img src="images/image4.gif" /></li>
<li><img src="images/image5.gif" /></li>
<li><img src="images/image6.gif" /></li>
</ul>
  • whathaveyoutried.com
  • Fade in e out su quale azione? Al caricamento della pagina? Al passaggio del mouse??? ecc. Bisogno di più dettagli.
  • haveYouEvenTried.com
  • creazione di una presentazione così non c’è un’immagine che sfuma e un altro lo sostituisce nella stessa scatola. Ho provato vari script e tutti funzionano, ma sono troppo complesse, se sai cosa voglio dire…speravo che avrei potuto ottenere un semplice script per fare questo
  • La ricerca di jQuery cycle
  • Si può provare questo esempio : webdevlopementhelp.di blogspot.in/2009/09/…

InformationsquelleAutor Jay Smoke | 2013-02-06

 

3 Replies
  1. 10

    Questo è il più semplice che ho potuto ottenere, è una galleria circolare, che inizia quando si raggiunge la fine.

    Qui è un violino: http://jsfiddle.net/KA4Zq/

    var count = 1;
    setInterval(function() {
        count = ($(".slideshow :nth-child("+count+")").fadeOut().next().length == 0) ? 1 : count+1;
        $(".slideshow :nth-child("+count+")").fadeIn();
    }, 2000);

    L’unica cosa che dovrebbe cambiare è il 2000 valore (2sec). Se si aggiunge più immagini nella galleria non c’è bisogno di impostare qualsiasi altra variabile, la sceneggiatura di fare tutto da sé…

    E per essere l’evento più semplice, ho modificato il tuo codice html, troppo, non c’è bisogno di avere un ul list, a div con le immagini all’interno:

    <div class="slideshow">
        <img src="" />
        <img src="" />
        ...
    </div>
    • dal modo di controllo fade in e out timer, aggiungere un parametro con il milisecs si desidera la funzione. ex: fadeIn(1000);
    • Grazie Toni, ma non è nth-child non ancora supportate da alcuni browser diversi da IE?
    • Ho testato questo esempio in IE7, 8 e 9, e il suo lavoro… Probabilmente il :nth-child non è supportato in IE quando utilizzato in selettori CSS, tuttavia in jQuery funziona …
    • Ho usato $(".slideshow :nth-child(0)") ma si può anche, per esempio,$(".slideshow").children().eq(0), il risultato è lo stesso …
    • mi puoi aiutare su mia questa domanda, per favore? stackoverflow.com/q/19590956/1534785
    • E ‘ risposto @JhoonBey 🙂

  2. 5

    Selezionare tutte le immagini all’interno ul li come questo $('ul li img') quindi utilizzare .fadeIn() per le immagini in dissolvenza.

    $('ul li img').fadeIn('slow');

    Per fare una presentazione, è possibile utilizzare interval e :eq()

          var cnt = 0; 
    setInterval(function(){
            cnt ==7 ? cnt=0:cnt++
            $('ul li img').fadeOut('');
            $('ul li img:eq('+cnt+')').fadeIn(1000)
        },1000);
    • ciao @Anton, script funziona, ma ho due problemi, 1. quando il ciclo arriva l’ultima immagine, c’è un gap prima della prima immagine mostra ancora una volta. Può essere senza soluzione di continuità? 2. Come si può controllare la velocità? Grazie mille.

Lascia un commento