Question

我最近从http://www.mclelun.com/labs/#jqbanner下载了一个JQuery旋转横幅插件。我注意到，当我在我的页面上有一个旋转横幅时，它的工作非常出色，但是当我尝试添加另一个时，只有其中一个，第一个旋转横幅将起作用。第二个不起作用。

如何让两个旋转横幅同时工作？

以下是我的代码：

//##########################################
//###### The first Banner rotator ##########
//##########################################

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jqbanner.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jqbanner.css" />

包括横幅列表告诉脚本页面中的哪些图像用于旋转横幅。

<div id="jqb_object">

<div class="jqb_slides">
<div class="jqb_slide" title="slide title" ><a href="slide link"><img src="banner1.jpg"/></a></div>
<div class="jqb_slide" title="slide title" ><a href="slide link"><img src="banner2.jpg"/></a></div>
<div class="jqb_slide" title="slide title"><a href="slide link"><img src="banner3.jpg"/></a></div>
<div class="jqb_slide" title="slide title" ><span>TEXT SLIDE IN DIV</span></div></div>

<div class="jqb_bar">
<div class="jqb_info"></div>
<div id="btn_next" class="jqb_btn jqb_btn_next"></div>
<div id="btn_pauseplay" class="jqb_btn jqb_btn_pause"></div>
<div id="btn_prev" class="jqb_btn jqb_btn_prev"></div>
</div>

</div>

以上将有效。但是，当我尝试添加新横幅时，如下面的代码：

//##########################################
//###### The second Banner rotator #########
//##########################################

<div id="jqb_object">

<div class="jqb_slides">
<div class="jqb_slide" title="slide title" ><a href="slide link"><img src="banner1.jpg"/></a></div>
<div class="jqb_slide" title="slide title" ><a href="slide link"><img src="banner2.jpg"/></a></div>
<div class="jqb_slide" title="slide title"><a href="slide link"><img src="banner3.jpg"/></a></div>
<div class="jqb_slide" title="slide title" ><span>TEXT SLIDE IN DIV</span></div></div>

<div class="jqb_bar">
<div class="jqb_info"></div>
<div id="btn_next" class="jqb_btn jqb_btn_next"></div>
<div id="btn_pauseplay" class="jqb_btn jqb_btn_pause"></div>
<div id="btn_prev" class="jqb_btn jqb_btn_prev"></div>
</div>

</div>

第二个横幅旋转器不起作用

期待你的回复。

Sir BT

Answer 1

这是因为插件使用ID，例如id="jqb_object"，并且这些ID在页面上被定义为唯一的。如果作者偶然将ID加倍，浏览器通常会占用第一个。

在你的情况下，你可以破解插件（搜索'＃'并用'。'替换），但很可能，这是更复杂的修复，联系作者并告诉问题或搜索另一个插件。

为什么Jquery插件重复不起作用

1 个答案: