Cursore/slideshow di immagini molto semplice con pulsante sinistro e destro. Nessun autoplay

Question

Sto provando a creare uno slide/slideshow di immagini molto, molto semplice senza autoplay, per favore. Voglio solo andare all'immagine successiva o precedente al clic. Avere alcuni problemi come puoi leggere qui sotto.

Ecco il jsFiddlehttp://jsfiddle.net/HsEne/12/ (ho appena usato i colori di sfondo, invece di immagini nella violino così come passato img a div, ma è lo stesso identico problema, naturalmente)

Il codice HTML:

<div id="slider-wrapper"> 

<div id="slider"> 
<img class="sp" src="/img1.jpg"> 
<img class="sp" src="/img2.jpg"> 
<img class="sp" src="/img3.jpg"> 
<img class="sp" src="/img4.jpg"> 
<img class="sp" src="/img5.jpg"> 
<img class="sp" src="/img6.jpg"> 
</div> 

<img id="button-previous" src="/button-arrow-left.jpg"> 
<img id="button-next" src="/button-arrow-right.jpg"> 
</div> 

Il CSS:

#slider-wrapper { 
display: block; 
max-width: 790px; 
margin: 5% auto; 
max-height: 500px; 
height: 100%; } 

#slider { 
display: block; 
position: relative; 
z-index: 99999; 
max-width: 710px; 
width: 100%; 
margin: 0 auto; } 

#button-previous { 
position: relative; 
left: 0; 
margin-top: 40%; 
width: 40px; 
height: 60px; } 

#button-next { 
position: relative; 
margin-top: 40%; 
float: right; } 

.sp { 
position: absolute; } 

#slider .sp { 
max-width: 710px; 
width: 100%; 
max-height: 500px; } 

jQuery per il pulsante accanto:

jQuery("document").ready(function(){ 
    jQuery("#slider > img:gt(0)").hide(); 
    jQuery("#button-next").click(function() { 
     jQuery("#slider > img:first") 
    .fadeOut(1000) 
    .next() 
    .fadeIn(1000) 
    .appendTo("#slider"); 
    }); 
}); 

È possibile che questo jQuery funziona bene, tranne che salta la prima immagine se un utente fa clic sul pulsante Avanti ultima diapositiva. Visualizza solo la prima immagine una volta, tutte le altre immagini continueranno a scorrere ogni volta che viene cliccato il prossimo. Per qualche motivo display: nessuno viene aggiunto alla prima immagine ma non so da dove proviene quel codice.

jQuery per il tasto precedente:

jQuery("document").ready(function(){ 
    jQuery("#slider > img:gt(0)").hide(); 
    jQuery("#button-previous").click(function() { 
     jQuery("#slider > img:last") 
    .fadeOut(1000) 
    .next() 
    .fadeIn(1000) 
    .appendTo("#slider"); 
    }); 
}); 

Questo codice jQuery sopra restituirà l'immagine appena in anteprima come dovrebbe. Ma quando cliccato di nuovo non fa nulla.

Ho anche provato .prev() in sostituzione di .next(). Funziona perfettamente la prima volta che fai clic sul pulsante precedente. Supponiamo di vedere l'immagine n. 4. Quando faccio clic sul pulsante precedente, si passa all'immagine n. 3, come dovrebbe. Ma quando si fa clic di nuovo su di esso non si passa all'immagine n. 2, si torna all'immagine n. 4, quindi n. 3 e n. 4, ripetendosi.

Answer 1

Dopo aver letto il tuo commento sul mio risposta precedente ho pensato che avrei potuto mettere questo come una risposta separata.

Anche se apprezzo il tuo approccio nel cercare di farlo manualmente per ottenere una comprensione migliore di jQuery, sottolineo comunque il merito nell'utilizzo di framework esistenti.

Detto questo, ecco una soluzione.Ho modificato un po 'del vostro CSS e HTML e solo per rendere più facile per me lavorare con

WORKING JS FIDDLE - http://jsfiddle.net/HsEne/15/

Questo è il jQuery

$(document).ready(function(){ 
$('.sp').first().addClass('active'); 
$('.sp').hide();  
$('.active').show(); 

    $('#button-next').click(function(){ 

    $('.active').removeClass('active').addClass('oldActive');  
        if ($('.oldActive').is(':last-child')) { 
     $('.sp').first().addClass('active'); 
     } 
     else{ 
     $('.oldActive').next().addClass('active'); 
     } 
    $('.oldActive').removeClass('oldActive'); 
    $('.sp').fadeOut(); 
    $('.active').fadeIn(); 


    }); 

     $('#button-previous').click(function(){ 
    $('.active').removeClass('active').addClass('oldActive');  
      if ($('.oldActive').is(':first-child')) { 
     $('.sp').last().addClass('active'); 
     } 
      else{ 
    $('.oldActive').prev().addClass('active'); 
      } 
    $('.oldActive').removeClass('oldActive'); 
    $('.sp').fadeOut(); 
    $('.active').fadeIn(); 
    }); 




}); 

Così ora la spiegazione.
Fase 1
1) Caricare lo script su documento pronto.

2) Afferra la prima diapositiva e aggiungi una classe "attiva" in modo da sapere quale diapositiva abbiamo a che fare.

3) Nasconde tutte le diapositive e mostra la diapositiva attiva. Quindi ora la diapositiva # 1 è il blocco di visualizzazione e tutti gli altri sono visualizzati: nessuno;

Fase 2 Operazioni con l'evento clic-pulsante successivo.
1) Rimuovi la classe attiva corrente dalla diapositiva che scomparirà e assegnagli la classe oldActive in modo che sappiamo che è sulla sua uscita.

2) Next è un'istruzione if per verificare se siamo alla fine della presentazione e dobbiamo tornare di nuovo all'inizio. Controlla se oldActive (ovvero la diapositiva in uscita) è l'ultimo figlio. Se lo è, quindi tornare al primo figlio e renderlo 'attivo'. Se non è l'ultimo figlio, prendi l'elemento successivo (usando .next()) e assegnagli la classe attiva.

3) Rimuoviamo la classe oldActive perché non è più necessaria.

4) fadeout tutte le diapositive

5) Fade In diapositive attivi

Fase 3

Come nel passaggio due ma utilizzando una logica inversa per attraversare attraverso gli elementi all'indietro .

È importante notare che ci sono migliaia di modi per ottenerlo. Questa è solo la mia opinione sulla situazione.

Answer 2

Perché provare a reinventare la ruota? Esistono soluzioni di slideshow jQuery più leggere, quindi è possibile attirare l'attenzione su qualcuno e qualcuno ha già svolto il duro lavoro per te e ha pensato ai problemi che potresti incontrare (compatibilità cross-browser, ecc.).

jQuery Cycle è una delle mie librerie leggere preferite.

Cosa si vuole raggiungere si potrebbe fare in un solo

jQuery("#slideshow").cycle({ 
    timeout:0, // no autoplay 
    fx: 'fade', //fade effect, although there are heaps 
    next: '#next', 
    prev: '#prev' 
    }); 

JSFIDDLE TO SEE HOW EASY IT IS

Answer 3

Codice molto semplice per rendere il cursore jquery Ecco due primi div è il visualizzatore di slider e il secondo è il contenitore dell'elenco di immagini. Basta copiare incollare il codice e personalizzare con css.

<div class="featured-image" style="height:300px"> 
    <img id="thumbnail" src="01.jpg"/> 
    </div> 

    <div class="post-margin" style="margin:10px 0px; padding:0px;" id="thumblist"> 
    <img src='01.jpg'> 
    <img src='02.jpg'> 
    <img src='03.jpg'> 
    <img src='04.jpg'> 
    </div> 

    <script type="text/javascript"> 
      function changeThumbnail() 
      { 
      $("#thumbnail").fadeOut(200); 
      var path=$("#thumbnail").attr('src'); 
      var arr= new Array(); var i=0; 
      $("#thumblist img").each(function(index, element) { 
       arr[i]=$(this).attr('src'); 
       i++; 
      }); 
      var index= arr.indexOf(path); 
      if(index==(arr.length-1)) 
      path=arr[0]; 
      else 
      path=arr[index+1]; 
      $("#thumbnail").attr('src',path).fadeIn(200); 
      setTimeout(changeThumbnail, 5000); 
      } 
      setTimeout(changeThumbnail, 5000); 
    </script> 

Answer 4

<script type="text/javascript"> 
        $(document).ready(function(e) { 
         $(".mqimg").mouseover(function() 
         { 
          $("#imgprev").animate({height: "250px",width: "70%",left: "15%"},100).html("<img src='"+$(this).attr('src')+"' width='100%' height='100%' />"); 
         }) 
         $(".mqimg").mouseout(function() 
         { 
          $("#imgprev").animate({height: "0px",width: "0%",left: "50%"},100); 
         }) 
        }); 
        </script> 
        <style> 
        .mqimg{ cursor:pointer;} 
        </style> 
        <div style="position:relative; width:100%; height:1px; text-align:center;">`enter code here` 
        <div id="imgprev" style="position:absolute; display:block; box-shadow:2px 5px 10px #333; width:70%; height:0px; background:#999; left:15%; bottom:15px; "></div> 
<img class='mqimg' src='spppimages/1.jpg' height='100px' /> 
<img class='mqimg' src='spppimages/2.jpg' height='100px' /> 
<img class='mqimg' src='spppimages/3.jpg' height='100px' /> 
<img class='mqimg' src='spppimages/4.jpg' height='100px' /> 
<img class='mqimg' src='spppimages/5.jpg' height='100px' />