créer un carrousel avec javascript?

Je veux créer un carrousel où, si l'utilisateur appuie sur prev et suivant, seule l'image et son texte associé doivent être affichés. Comme pour le premier élément qui est Image1, Ceci est Image1, le texte devrait être affiché, puis si l'utilisateur appuie sur Image2 suivante et Ceci est Image2 devrait être affiché.créer un carrousel avec javascript?

Ci-dessous est mon code

Merci

<html> 
<head> 
    <style> 
    #container p{ display: inline; } 
    </style> 
    <script type="text/javascript" src="prototype.js" > </script> 
</head> 
<body> 
    <div id="container"> 
    <div id="section1"> 
     <img src="images/image1.jpg" height="20" width="20" /> 
     <p> This is a image1 </p> 
    </div> 
    <div id="section2"> 
     <img src="images/image1.jpg" height="20" width="20" /> 
     <p> This is a image2 </p>  
    </div> 
    <div id="section3"> 
     <img src="images/image1.jpg" height="20" width="20" /> 
     <p> This is a image3 </p> 
    </div> 
    <a id="prev" href="#">Prev</a> 
    <a id="next" href="#">Next</a> 
    </div> 


    <script type="text/javascript"> 
    Event.observe('prev', 'click', function(event){ 
     alert(' Prev clicked!'); 
    }); 

    Event.observe('next', 'click', function(event){ 
     alert(' Next clicked!'); 
    }); 

    $('section1').hide(); 
    </script> 
</body> 
</html>

Source

2010-01-16 Josh

Salut Doug, l'avez-vous édité? – Josh

http://sorgalla.com/projects/jcarousel/

@Nishant: vous pouvez placer le texte que vous voulez dans les éléments jCarousel, voir la source de cet exemple, par exemple:

http://sorgalla.com/projects/jcarousel/examples/special_easing.html

Source

2010-01-16 05:49:51 jspcal

comment puis-je faire cela avec du texte et de l'image? – Josh

-1 Cette question a été tagguée avec Prototype, pas jQuery –

@Justin: vous avez sûrement manqué que c'est aussi * tagué * javascript. jQuery et le prototype peuvent être * utilisés ensemble * sans aucun problème. – jspcal

Voilà une approche simple qui fait le travail avec un changement mineur au HTML

JavaScript

Event.observe(window, 'load', function() { 
    var current = 0, 
     sections = $$('.section'), 
     len  = sections.length; 

    var clear = function() { 
     sections.each(function(s) { s.hide(); }); 
    }; 

    Event.observe('prev', 'click', function(event){ 
     // No wrapping 
     // current = Math.max(0, current - 1); 

     // Wrapping 
     current = (current - 1 < 0) ? (len - 1) : (current - 1); 

     clear(); 
     sections[current].show(); 
    }); 

    Event.observe('next', 'click', function(event){ 
     // No wrapping 
     // current = Math.min(len -1, current + 1); 

     // Wrapping 
     current = (current + 1 == len) ? 0 : (current + 1); 

     clear(); 
     sections[current].show(); 
    }); 

    clear(); 
    sections[current].show(); 
});

HTML

<div id="container"> 
    <div class="section" id="section1"> 
     <img src="images/image1.jpg" height="20" width="20" /> 
     <p> This is a image1 </p> 
    </div> 
    <div class="section" id="section2"> 
     <img src="images/image1.jpg" height="20" width="20" /> 
     <p> This is a image2 </p>  
    </div> 
    <div class="section" id="section3"> 
     <img src="images/image1.jpg" height="20" width="20" /> 
     <p> This is a image3 </p> 
    </div> 
    <a id="prev" href="#">Prev</a> 
    <a id="next" href="#">Next</a> 
    </div>

Vous n'avez pas spécifié si vous ou pas voulu avoir la Le carrousel s'enroule vers l'extrémité opposée une fois qu'il a atteint le premier ou le dernier carreau, alors je vous ai donné le calcul pour les deux.

Source

2010-01-16 10:34:16

Merci, vous avez raison. J'ai changé son balisage mais j'ai oublié de le copier depuis ma page de texte. Il est à la fois plus facile à coder et à maintenir d'ajouter simplement une classe CSS unificatrice aux éléments qui font partie du contenu du carrousel. Il est également très probable qu'il soit utile d'un point de vue CSS si le PO veut que les différentes sections du carrousel soient uniformes en taille, en position, etc. –

créer un carrousel avec javascript?

Répondre

Questions connexes