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

使用Jquery堆叠多个幻灯片

1 个答案: