0

ユーザーが前と次を押すと、画像とそれに関連するテキストのみが表示されるカルーセルを作成したいと考えています。最初のアイテムが Image1 の場合と同様に、This is Image1 テキストが表示され、ユーザーが次の Image2 を押すと、This is 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>
4

2 に答える 2

0

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

@Nishant: jcarousel 要素内に任意のテキストを配置できます。たとえば、この例のソースを表示します。

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

于 2010-01-16T05:49:51.107 に答える
0

これは、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>

カルーセルが最初または最後のペインに到達したときに、反対側の端にラップアラウンドするかどうかを指定しなかったので、両方の計算を行いました。

于 2010-01-16T10:34:16.020 に答える