Question

是否可以使用jQuery（或某些类似的软件包）在同一网页上创建多个幻灯片（每个幻灯片显示具有不同的图像集）？如果是这样，怎么样？

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

Answer 1

是的，这是可能的。

我使用Coda Slider代码得到了很好的结果： http://www.ndoherty.biz/demos/coda-slider/2.0/

代码看起来像这样，其中面板是滑块中的一个项目：

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

您也可以使用适当的CSS，JS和jQuery以及http://gsgd.co.uk/sandbox/jquery/easing/等插件自行制作它们，以帮助创建流畅的动画。

Answer 2

是的，我在：http://malsup.com/jquery/cycle/

使用了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>

和

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

      <div id="after_slide_wrapper"> 
        <div id="after_slide">
          <img src"my/image/directory/2.img"/>
        </div>
      <div id="slide_comment">
        <h3>person comment for this img goes here</h3>
      </div>
    </div>

    <div id="after_slide_wrapper">
      <div id="after_slide">
        <img src"my/image/directory/4.img"/>
      </div>
      <div id="slide_comment">
        <h3>person comment for this img goes here</h3>
      </div>
    </div>

  </div>
</div>

“before_n_after_window”的子节点是正在循环的div：

$("#before_n_after_window").each(function(index){
  $(this).cycle();
});

幻灯片包装器（before_slide_wrapper和after_slide_wrapper）处于cycle（）的完全控制 - 精细状态。但是，嵌套在其中的任何东西都不是，所以你可以为幻灯片放置更多的兄弟（before_slide和after_slide） - 因此“#slide_comment”div。

“before_n_after_window”仅在cycle（）的半控制下，并使用与其自身不冲突的css代码。 “#before_window_wrapper”和“#after_window_wrapper”完全由您控制（顺便提一下）。

现在您已经拥有了“#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();
});

您必须遵守上述命名约定或您可能决定的任何其他约定。实际的控件可以放在窗口内的任何地方 - bug问题。

在旁注中，我将这些对设置为在循环后立即暂停，因为我不想在页面上运行多个幻灯片。我希望用户选择要循环的那个。此外，我必须找到一种方法来关闭可能正在运行的任何其他周期。但是：

if(better_solution){
  return please_post;
}

使用jQuery在一个页面上进行多个幻灯片放映

2 个答案: