使用jQuery在一个页面上显示多个幻灯片

是否可以使用jQuery（或类似的软件包）在同一网页上创建多个幻灯片（当然，每个幻灯片都有一组不同的图像）？如果是，怎么做

到目前为止，所有尝试都失败，因为所有图像要么都显示在两个幻灯片中，要么编号不正确，要么出现了其他干扰效果。

是的，这是可能的

我在这里使用尾波滑块代码得到了很好的结果：

代码如下所示，其中面板是滑块中的项目之一：

<div class="slider-wrap">
  <div id="slider1" class="csw">
    <div class="panelContainer">                
      <div class="panel" title="Panel 1">

---

您还可以使用合适的CSS、JS和jQuery以及类似于帮助创建平滑动画的插件自己制作它们。

是的，我在以下位置使用了Cycle插件：

我把我的每个img嵌套在两个div和两个div中，用以包装东西

<div id="before_window_wrapper">
  <div name="before_n_after_window">

    <div id="before_slide_wrapper">
      <div id="before_slide">
        <img src"my/image/directory/1.img"/>
      </div>
    <div id="slide_comment">
      <h3>person comment for this img goes here</h3>
    </div>

  </div>
</div>

<div id="before_slide_wrapper">
  <div id="before_slide">
    <img src"my/image/directory/3.img"/>
  </div>
  <div id="slide_comment">
    <h3>person comment for this img goes here</h3>
  </div>
</div>

幻灯片包装（幻灯片包装前和幻灯片包装后）处于cycle（）的完全控制下-良好。但是，嵌套在它里面的任何东西都不是，因此您可以为幻灯片放置更多的同级（在幻灯片之前和之后）-因此是“#幻灯片注释”div

“before\n\u after\u window”仅在cycle（）的半控制下，并且使用与自己的css代码不冲突的css代码。“#before_window_wrapper”和“#before_window_wrapper”完全在您的控制之下（css方面）

现在您有了“#before_n_after_window”及其子窗口，只需遍历它们，命名并指向每对控件：

var i = index;
var current_slide = $(this);

// hides the pause button
$('#pause_button_'+i).hide();
//checks index for odd or even
i = (i%=2) ? ((index+1)/2) : ((index/2)+1);

$(current_slide).cycle({
  fx:    'fade',
  pager:    '#nav_' + i,
  prev:     '#previous_button_' + i,
  next:     '#next_button_' + i,
});

// I want to only show the play or pause button at any given time
$(current_slide).cycle('pause');
$('#play_button_'+i).click(function(){
  $(current_slide).cycle('resume', true); 
  $('#pause_button_'+i).show();
  $('#play_button_'+i).hide();
});
$('#pause_button_'+i).click(function() { 
  $(current_slide).cycle('pause'); 
  $('#pause_button_'+i).hide();
  $('#play_button_'+i).show();
});

您必须遵循上述命名约定或您可能决定的任何其他命名约定。实际的控件可以放在任何地方，除了windows bug问题

另一方面，我将这些对设置为在循环后立即暂停，因为我不想在页面上运行多张幻灯片。我想让用户选择哪一个循环。此外，我必须找到一种方法来关闭可能正在运行的任何其他循环。然而：

if(better_solution){
  return please_post;
}

---

您是否使用特定的插件？一些代码或链接会很有帮助。

var i = index;
var current_slide = $(this);

// hides the pause button
$('#pause_button_'+i).hide();
//checks index for odd or even
i = (i%=2) ? ((index+1)/2) : ((index/2)+1);

$(current_slide).cycle({
  fx:    'fade',
  pager:    '#nav_' + i,
  prev:     '#previous_button_' + i,
  next:     '#next_button_' + i,
});

// I want to only show the play or pause button at any given time
$(current_slide).cycle('pause');
$('#play_button_'+i).click(function(){
  $(current_slide).cycle('resume', true); 
  $('#pause_button_'+i).show();
  $('#play_button_'+i).hide();
});
$('#pause_button_'+i).click(function() { 
  $(current_slide).cycle('pause'); 
  $('#pause_button_'+i).hide();
  $('#play_button_'+i).show();
});

if(better_solution){
  return please_post;
}