多个JQuery的幻灯片

Question

我想创建一个页面与多个jQuery幻灯片显示每个与他们自己的下一个，使用jQuery循环所有前一个按钮。这里是我的代码：

<script type="text/javascript"> 

$(document).ready(function(){ 
    $('#slideshow').cycle({ 
    fx:'fade', 
    speed:1, 
    timeout: 0, 
    next:'#next', 
    prev:'#prev', 
    }); 
}); 

    </script> 

和2张幻灯片的HTML（但我想4）

<div id="content"> 
<a name="1" id="1"></a> 
<div id ="slideshow"> 
    <img src="image2.jpg" width="675" height="420" /> 
    <img src="image.jpg" width="675" height="420" /> 
</div> 
<a id="prev" href="#" class="Code-Pro3">Prev</a> &nbsp;&nbsp; <a id="next" href="#" class="Code-Pro3">Next </a> 


<a name="2" id="2"></a> 
<div id ="slideshow2"> 
    <img src="image.jpg" width="675" height="420" /> 
    <img src="image2.jpg" width="675" height="420" /> 
</div> 
<a id="prev" href="#" class="Code-Pro3">Prev</a> &nbsp;&nbsp; <a id="next" href="#" class="Code-Pro3">Next </a> 

任何帮助表示赞赏。谢谢。

Answer 1

为了让两个单独的div具有自己的上一个链接和下一个链接，您需要调用两次循环，并为链接使用唯一标识。所以，你的脚本应该是这样的：

<script type="text/javascript"> 

$(document).ready(function(){ 
    $('#slideshow1').cycle({ 
    fx:'fade', 
    speed:1, 
    timeout: 0, 
    next:'#next1', 
    prev:'#prev1', 
    }); 
$('#slideshow2').cycle({ 
    fx:'fade', 
    speed:1, 
    timeout: 0, 
    next:'#next2', 
    prev:'#prev2', 
    }); 
}); 

</script> 

和您的标记看起来像：

<div id="content"> 
<a name="1" id="1"></a> 
<div id ="slideshow1"> 
    <img src="image2.jpg" width="675" height="420" /> 
    <img src="image.jpg" width="675" height="420" /> 
</div> 
<a id="prev1" href="#" class="Code-Pro3">Prev</a> &nbsp;&nbsp; <a id="next1" href="#" class="Code-Pro3">Next </a> 

<a name="2" id="2"></a> 
<div id ="slideshow2"> 
    <img src="image.jpg" width="675" height="420" /> 
    <img src="image2.jpg" width="675" height="420" /> 
</div> 
<a id="prev2" href="#" class="Code-Pro3">Prev</a> &nbsp;&nbsp; <a id="next2" href="#" class="Code-Pro3">Next </a> 

为例见http://www.malsup.com/jquery/cycle/scrollhv.html。

希望帮助，

大卫

页面上，告诉每一个 .slideshow找到了自己的 上一个和 下一个按钮

Answer 2

一种方法是组幻灯片和上一个和下一个按钮，然后用jQuery选择器找到它们：

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('.slideshow').each(function(){ 
     $(this).cycle({ 
     fx:'fade', 
     speed:1, 
     timeout: 0, 
     next: $('.next', $(this).parent()), 
     prev: $('.prev', $(this).parent()) 
     }); 
    }); 
    }); 
</script> 

现在在html中，你可以使用类而不是ID，只是不要忘了分组每个幻灯片与自己的prev和下按钮。

<div id="content"> 
    <div> 
    <a name="1" id="1"></a> 
    <div class ="slideshow"> 
     <img src="image2.jpg" width="675" height="420" /> 
     <img src="image.jpg" width="675" height="420" /> 
    </div> 
    <a href="#" class="Code-Pro3 prev">Prev</a> &nbsp;&nbsp; <a href="#" class="Code-Pro3 next">Next </a> 
    </div> 

    <div> 
    <a name="2" id="2"></a> 
    <div class ="slideshow"> 
     <img src="image.jpg" width="675" height="420" /> 
     <img src="image2.jpg" width="675" height="420" /> 
    </div> 
    <a href="#" class="Code-Pro3 prev">Prev</a> &nbsp;&nbsp; <a href="#" class="Code-Pro3 next">Next </a> 
    </div> 
    ...