Question

I want to create a carousel where if the user press prev and next only the image and its associated text should be displayed. Like for first item that is Image1, This is Image1 text should be displayed then if the user presses next Image2 and This is Image2 should be displayed.

Below is my code

Thanks

<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>

Answer 1

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

@Nishant: you can place any text you want within the jcarousel elements, view the source of this example for instance:

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

Answer 2

Here s a simple approach that gets the job done with a minor change to the 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>

You didn t specify whether or not you wanted to have the carousel wrap around to the opposite end once it reached the first or last pane, so I gave you the math for both.

友情链接