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

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>

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

期待您的回复。

BT 先生

Answer 1

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

在您的情况下，您可以破解插件（搜索“#”并替换为“.”），但很有可能，修复起来更复杂，请联系作者并说明问题或搜索另一个插件。