2010-11-25 10 views
2

Je me demandais si quelqu'un a quelque chose de simple pour créer une galerie à partir d'un groupe de divs. Tel quejquery - faire une galerie simple d'un tas de DIVs

<div id=gallery> 
    <div class='slide' id=1><img src='image1.png'> this is image 1</div> 
    <div class='slide' id=2><img src='image1.png'> this is image 1</div> 
    <div class='slide' id=3><img src='image1.png'> this is image 1</div> 
    <div class='slide' id=4><img src='image1.png'> this is image 1</div> 
</div> 

J'aime montrer un DIV à la fois. Cliquer div avance à la diapositive suivante. Et à la fin, il revient à la première.

Aucun effet, juste une simple représentation d'un div suivi par le suivant.

Merci Scott

MISE À JOUR:

D'accord, je décidé d'écrire juste mon propre basé sur http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/. N'importe qui peut rendre ce code plus serré et efficace, s'il vous plaît ajouter un commentaire.

$(document).ready(function(){ 
    var currentPosition = 1; 
    var slides = $('.slide'); 
    var numberOfSlides = slides.length; 

    if(currentPosition==1){ $('.slide').hide(); $('#1').show()}; 

    // Create event listeners for .controls clicks 
    $('.slide') 
    .bind('click', function(){ 
    currentPosition = parseInt($(this).attr('id')); 
    if(currentPosition == numberOfSlides) { 
     $('.slide').hide(); 
     $('#1').show(); 
    } else { 
     $('.slide').hide(); 
     nextPosition = parseInt(currentPosition+1); 

     $('#'+nextPosition).show(); 
    } 
    }); 
}); 
+0

voir si c'est ce que vous voulez http: //www.allposters. com /, il y a un curseur mis en œuvre que nous avons récemment fait – kobe

+0

il y a des exemples disponibles ici http://vandelaydesign.com/blog/web-development/jquery-image-galleries/ – kobe

+0

avez-vous vu un exemple à allposters.com, je peux expliquer y ou comment c'est fait. – kobe

Répondre