Très Simple Image Slider/Slideshow avec les boutons gauche et droit. Pas de lecture automatique

Après la lecture de votre commentaire sur ma réponse précédente j'ai pensé que je pourrais mettre cela comme une réponse distincte.

Bien que j'apprécie votre approche d'essayer de le faire manuellement pour obtenir une meilleure compréhension sur jQuery je dois encore souligner le mérite en utilisant les cadres existants.

Cela dit, voici une solution. J'ai modifié certains de vos css et HTML et juste pour rendre les choses plus facile pour moi de travailler avec

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

C'est le 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();
    });




});

Donc maintenant l'explication.

Stade 1

1) Chargez le script sur le document de prêt.

2) Saisir la première diapositive et ajouter une classe "active", donc nous savons que la diapositive qui nous occupe.

3) Masquer toutes les diapositives et de montrer de la diapositive active. Alors maintenant, faites glisser #1 est l'affichage à bloc et tout le reste sont des display:none;

Stade 2
De travail avec le bouton-ensuite, cliquez sur l'événement.

1) Supprimer l'actuelle classe active à partir de la diapositive qui sera en train de disparaître et de lui donner la classe oldActive si nous savons qu'il est sur son chemin.

2) Ensuite c'est une instruction if pour vérifier si nous sommes à la fin du diaporama et de la nécessité de revenir à la recommencer. Il vérifie si les oldActive (c'est à dire le sortant de la diapositive) est le dernier enfant. Si elle l'est, puis revenir en arrière pour le premier enfant et de le rendre "active". Si c'est pas le dernier enfant, puis il suffit de saisir l'élément suivant (à l'aide .next() ) et lui donner de la classe active.

3) Nous supprimons la classe oldActive parce qu'il n'est plus nécessaire.

4) fadeOut toutes les diapositives

5) fondu Dans l'actif de diapositives

Étape 3

Même que dans l'étape deux, mais à l'aide de certains d'inverser la logique pour voyager à travers les éléments en arrière.

Il est important de noter qu'il ya des milliers de façons que vous pouvez atteindre cet objectif. Ce n'est que mon point de vue sur la situation.

OriginalL'auteur James

Code très simple à faire jquery slider
Voici deux div premier est le curseur de la visionneuse et le second est la liste des images contenant.
Il suffit de copier coller le code et le personnaliser à l'aide de 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>

OriginalL'auteur Kaushal Sachan