用javascript创建轮播？

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. 我想创建一个轮播，如果用户按prev和next，则仅显示图像及其关联的文本。 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. 像第一个项目是Image1一样，应显示“这是Image1”文本，然后如果用户按下下一个Image2，则应显示“这是Image2”。

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/ 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: @Nishant：您可以在jcarousel元素中放置任何想要的文本，例如查看此示例的源代码：

http://sorgalla.com/projects/jcarousel/examples/special_easing.html 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 这是一种简单的方法，只需对HTML进行少量更改即可完成工作

JavaScript 的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 的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. 您没有指定在圆盘传送带到达第一个或最后一个窗格时是否要绕到另一端，因此我给了两者的数学依据。

用javascript创建轮播？

问题描述

2 个解决方案

解决方案1
0 2010-01-16 05:49:51

解决方案2
0 2010-01-16 10:34:16

用javascript创建轮播？

问题描述

2 个解决方案

解决方案1 0 2010-01-16 05:49:51

解决方案2 0 2010-01-16 10:34:16

解决方案1
0 2010-01-16 05:49:51

解决方案2
0 2010-01-16 10:34:16