Question

我正在尝试使用jquery循环all创建一个包含多个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具有自己的前一个和下一个链接，您需要调用两次循环并对链接使用唯一ID。所以你的脚本应该是这样的：

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

希望有所帮助，

大卫

Answer 2

告诉页面上的每个.slideshow找到自己的上一页和下一页按钮的一种方法是将幻灯片分组和 prev <分组同一父级中的/ em>和 next 按钮，然后使用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 和 next 按钮对每个幻灯片进行分组。

<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>    <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>    <a href="#" class="Code-Pro3 next">Next </a> </div> ...

多个Jquery幻灯片

2 个答案: