Very Simple Image Slider/Slideshow mit Links-und rechts-Taste. Kein autoplay

Nach der Lektüre Ihr Kommentar auf meine Vorherige Antwort, die ich dachte, ich könnte dies als eine separate Antwort.

Obwohl ich Schätze Ihren Ansatz zu versuchen, es manuell zu tun, um ein besseres Verständnis für jQuery ich habe immer noch das betonen der Verdienst in dem vorhandenen frameworks.

Gesagt, hier ist eine Lösung. Ich habe einige Modifikationen des css-und HTML-nur um es für mich einfacher, mit zu arbeiten

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

Dies ist die 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();
    });




});

So, jetzt die Erklärung.

Phase 1

1) Laden Sie das Skript auf Dokument bereit.

2) Greifen Sie die erste Folie und fügen Sie eine Klasse 'active', damit wir wissen, welche Folie wir es zu tun haben.

3) Blenden Sie alle Folien und zeigen Sie die aktive Folie. So, jetzt slide #1 ist die Anzeige blockiert und der ganze rest sind display:none;

Stage 2
Arbeiten mit der button-next klicken-Ereignis.

1) Entfernen Sie die aktuelle aktive Klasse aus die Folie, die werden verschwinden, und geben Sie die Klasse oldActive so wissen wir, dass es auf dem Weg zu gehen.

2) als Nächstes wird eine if-Anweisung, um zu überprüfen, ob wir am Ende der Diashow und Rückkehr zum start. Es wird geprüft, ob oldActive (D. H. die ausgehenden Folie) ist das Letzte Kind. Wenn es so ist, dann gehen Sie zurück zu dem ersten Kind und machen es "aktiv". Wenn es nicht das Letzte Kind, dann nehmen Sie einfach das nächste element (mit .next() ) und geben es Klasse aktiv.

3) Wir entfernen die Klasse oldActive, weil es nicht mehr gebraucht wird.

4) fadeOut alle Folien

5) fade-In die aktive Folien

Schritt 3

Gleiche wie in Schritt zwei, jedoch mit umgekehrter Logik zum Durchlaufen durch die Elemente rückwärts.

Es ist wichtig zu beachten, es gibt Tausende von Möglichkeiten, wie Sie diese erreichen können. Dies ist nur meine nehmen auf die situation.

Sehr einfache code-jquery slider
Hier zwei div-zuerst ist die slider-viewer und zweitens ist der image-Liste-container.
Kopieren Sie einfach fügen Sie den code ein und passen Sie mit 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>