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

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

是的，我使用了 Cycle 插件： http: //malsup.com/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>

和：

  <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”在你的完全控制之下（css-wise）。

现在您已经有了“#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 内部之外的任何地方 - 错误问题。

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

if(better_solution){
  return please_post;
}