jquery - 使用 Jquery 堆叠多个幻灯片

Question

JQuery新手在这里！我很难将多个幻灯片与每个它自己的单独控件堆叠在一起。一个幻灯片工作得很好。

但是，当我添加另一个幻灯片时，我会丢失该幻灯片的控件和标题。链接： http ://dl.dropbox.com/u/1466448/numbered/stack.html

我在其他相关文章中阅读了有关为每个幻灯片使用唯一 ID 的文章，但我在 jquery 方面的经验非常有限，无法理解这种方法。任何帮助将不胜感激。

谢谢！-泰国

Answer 1

在您的 HTML 中，您有两组 div 对吗？他们俩都有id="slideshow"一个兄弟姐妹id="title"。

尝试获取第二组 div，并将它们重新设置为 slideshow2 和 title2。它应该如下所示：

<div align="center"> 
<div id="demo"> 
    <div align="left" id="slideshow2" class="pics"> 
        <img src="images/nature/snow.jpg" alt="Snowy fied"/> 
        <img src="images/nature/city.jpg" alt="Furtistic City"/> 
        <img src="images/nature/sea.jpg" alt="By the sea"/> 
     </div> 
     <div align="left" id="title2"></div> 
</div> 
</div> 

然后为他们复制并粘贴您的 javascript，更改那里的引用。您的第二个副本应如下所示：

$(function() {            
  $('#slideshow2').after('<div id="nav2" class="nav">').cycle({        
    fx:     'fade',        
    speed:  'slow',
    timeout: 0*1000,
    pager:  '#nav2',
    before: onBefore    });            
  function onBefore() {        $('#title2').html(this.alt);    }});