0

我想创建一个轮播，如果用户按下 prev 和 next ，则只应显示图像及其相关文本。就像第一个项目是 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 回答