使用Jquery堆叠多个幻灯片

JQuery新手在这里！我很难用每个幻灯片的单独控件来堆叠多个幻灯片。这张幻灯片效果很好

但是，当我添加另一个幻灯片时，我会丢失该幻灯片的控件和标题。链接：

我在其他相关的帖子上读到过关于为每张幻灯片使用唯一ID的内容，但我在jquery方面的经验非常有限，无法理解这种方法。任何帮助都将不胜感激

谢谢！

---

-泰语

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

试着用第二组div，将它们重新标记为幻灯片2和标题2。应该是这样的：

<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> 

$(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);    }});

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

<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> 

$(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);    }});