создание карусели с использованием JavaScript? - PullRequest
Новая
       19

создание карусели с использованием JavaScript?

0 голосов
/ 16 января 2010

Я хочу создать карусель, в которой при нажатии пользователем prev и next должно отображаться только изображение и связанный с ним текст. Как и для первого элемента, который является Image1, это текст Image1 должен отображаться тогда, если пользователь нажимает следующий Image2, и это Image2 должен отображаться.

Ниже мой код

Спасибо 

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

Ответы [ 2 ]

0 голосов
/ 16 января 2010

Вот простой подход, который выполняет работу с небольшим изменением 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>

Вы не указалихотите ли вы, чтобы карусель была намотана на противоположный конец, как только она достигла первой или последней панели, поэтому я дал вам математику для обоих.

0 голосов
/ 16 января 2010

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

@ Nishant: вы можете поместить любой текст в элементы jcarousel, посмотрите исходный код этого примера, например:

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

...