Question

我想创建一个旋转木马，如果用户按下prev，则只显示图像及其相关文本。与第一个项目Image1相同，如果用户按下一个Image2，则应显示Image1文本，并且应显示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>

Answer 1

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

@Nishant：你可以在jcarousel元素中放置你想要的任何文本，例如查看这个例子的来源：

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

Answer 2

这是一个简单的方法，通过对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>

你没有说明你是否想要在旋转木马到达第一个或最后一个窗格时将其旋转到另一端，所以我给了你两个数学。

用javascript创建旋转木马？

2 个答案: