jQuery 插件无法正常运行答案

【问题标题】：jQuery plugin won't run properlyjQuery 插件无法正常运行
【发布时间】：2013-11-15 18:43:15
【问题描述】：

我正在设计一个网页，我正在使用 jQuery Cycle 代码。问题是，我希望代码运行三个，但它只运行一个，而其他的就像它们不是“为此而编程的”。我不知道我做错了什么。我还在三个信息框中使用了相同的文本，并且在代码运行后会更改它们。

这是我的 HTML：

<div class="body"><!--BODY BEGINS-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

<script type="text/javascript">
$('#slideshow').cycle ({ timeout: 7000, cleartype: 1, speed: 400 });

</script>


<div class="promobod"><!--PROMOBOD BEGINS-->
<div id="slideshow">
<div>

    <div class="promtext">Praga y Budapest</div>
    <div class="precioth">$575
    <div class="cents">.00</div></div>
    <div class="USD">USD</div>
    <div class="promodet">
      <p>Incluye: Alojamiento, Desayuno diario,</p>
      <p>3 visitas</p></div>
   <div class="disclaimer">Duración de 11 días.</div>
</div>

<div>
    <div class="promtext">Italia Espectacular</div>
    <div class="precioth">$915
    <div class="cents">.00</div></div>
    <div class="USD">USD</div>
    <div class="promodet">
      <p>Incluye: Alojamiento, Desayuno diario,</p>
      <p>Visitas Panorámicas, 2 comidas</p></div> 
<div class="disclaimer">Duración de 8 días.</div>
</div>
</div><!--END OF PROMOBOD-->


<div class="promobod2"><!--PROMOBOD BEGINS-->
<div id="slideshow">
<div>

    <div class="promtext">Praga y Budapest</div>
    <div class="precioth">$575
    <div class="cents">.00</div></div>
    <div class="USD">USD</div>
    <div class="promodet">
      <p>Incluye: Alojamiento, Desayuno diario,</p>
      <p>3 visitas</p></div>
   <div class="disclaimer">Duración de 11 días.</div>
</div>

<div>
    <div class="promtext">Italia Espectacular</div>
    <div class="precioth">$915
    <div class="cents">.00</div></div>
    <div class="USD">USD</div>
    <div class="promodet">
      <p>Incluye: Alojamiento, Desayuno diario,</p>
      <p>Visitas Panorámicas, 2 comidas</p></div> 
<div class="disclaimer">Duración de 8 días.</div>
</div>
</div><!--END OF PROMOBOD-->




  <div class="promobod3"><!--BEGINS PROMOBOD3-->
<div id="slideshow">
<div>

    <div class="promtext">Praga y Budapest</div>
    <div class="precioth">$575
    <div class="cents">.00</div></div>
    <div class="USD">USD</div>
    <div class="promodet">
      <p>Incluye: Alojamiento, Desayuno diario,</p>
      <p>3 visitas</p></div>
   <div class="disclaimer">Duración de 11 días.</div>
</div>

<div>
    <div class="promtext">Italia Espectacular</div>
    <div class="precioth">$915
    <div class="cents">.00</div></div>
    <div class="USD">USD</div>
    <div class="promodet">
      <p>Incluye: Alojamiento, Desayuno diario,</p>
      <p>Visitas Panorámicas, 2 comidas</p></div> 
<div class="disclaimer">Duración de 8 días.</div>
</div>



  </div><!--END OF PROMOBOD3-->


</div></div></div>
</div>
</div><!--END OF BODY-->

还有我的 CSS：

.body{
    height: 515px;
    width: 1050px;
    margin: auto;
}

.promobod{
    width: 308px;
    height: 276px;
    position: absolute;
    left: 179px;
    top: 427px;
    background-image: url(../etc/info%20bar.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.promobod2{
    width: 308px;
    height: 276px;
    position: absolute;
    left: 341px;
    top: 0px;
    background-image: url(../etc/info%20bar.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.promobod3{
    width: 308px;
    height: 276px;
    position: absolute;
    left: 337px;
    top: 0px;
    background-image: url(../etc/info%20bar.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.promtext{
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    font-family: "Microsoft PhagsPa";
    position: absolute;
    left: 0px;
    top: 14px;
    width: 308px;
}

.precio{
    text-align: center;
    font-family: "Microsoft PhagsPa";
    font-size: 95pt;
    font-weight: bold;
    margin-top: -25px;
    letter-spacing: -15px;
    margin-right: 10px;
    margin-left: 10px;
    float: left;    
}

.cents{
    text-align: right;
    font-family: "Microsoft PhagsPa";
    font-weight: bold;
    margin-top: 10px;
    font-size: 30pt;
    position: absolute;
    height: 63px;
    left: 244px;
    top: 21px;
    width: 36px;
    letter-spacing: -2px;
}

.USD{
    text-align: right;
    font-family: "Microsoft PhagsPa";
    font-weight: bold;
    margin-top: 10px;
    font-size: 21pt;
    position: absolute;
    height: 63px;
    left: 248px;
    top: 82px;
    width: 36px;
    letter-spacing: -2px;
}



.promodet{
    text-align: center;
    font-size: 10pt;
    position: absolute;
    left: -1px;
    top: 180px;
    height: 76px;
    line-height: 3px;
    width: 309px;
}

.disclaimer{
    position: absolute;
    left: -1px;
    top: 238px;
    font-size: 8pt;
    text-align: center;
    width: 310px;
    height: 26px;
}


.precioth{
    text-align: center;
    font-family: "Microsoft PhagsPa";
    font-size: 95pt;
    font-weight: bold;
    letter-spacing: -15px;
    float: left;
    position: absolute;
    left: 5px;
    top: 23px;
}

非常感谢您的帮助并原谅我的英语。

【问题讨论】：

循环插件jquery.malsup.com/cycle的源码和注释
您能否在jsfiddle.net 上模拟一下，以便我们看到您遇到的问题？
第一个“矩形信息”是循环的，而另外两个不是，应该循环的信息在各自信息的顶部。

标签： jquery plugins cycle

【解决方案1】：

您正在包括 jQuery 1.5，但循环库上的注释状态“jQuery v1.7.1 及更高版本支持循环插件。”您真的应该更新到更新版本的 jQuery —— 1.5 大约有 2 年历史了。

每个幻灯片的 div 应该在下一个 promobod 开始之前关闭；在您确定为最终关闭 promobod-tag 之后，您将关闭它们。您的缩进和间距隐藏了其中的一些——您可能希望通过美化器或执行某些格式化/清理的 IDE 运行代码。这有助于揭示此类错误。（一旦我尝试缩进代码，我发现第二个 promobod 是第一个 promobod 的子对象，因为它是未封闭的 div。通过适当的缩进，它在视觉上很明显）。

您将幻灯片分配给 id "slideshow"，但您有多个具有该 ID 的元素。

<div class="promobod"><!--PROMOBOD BEGINS-->
<div id="slideshow">
[....]
<div class="promobod2"><!--PROMOBOD BEGINS-->
<div id="slideshow">
[....]
<div class="promobod3"><!--BEGINS PROMOBOD3-->
<div id="slideshow">
[...]

ID 只能用于一个元素；随后的使用被忽略（因为它们是无效的）。所以只有第一个“#slideshow”受到影响。

将它们改为类而不是 ID 怎么样？

$('.slideshow').cycle ({ timeout: 7000, cleartype: 1, speed: 400 });

<div class="promobod"><!--PROMOBOD BEGINS-->
<div class="slideshow">
[....[
<div class="promobod2"><!--PROMOBOD BEGINS-->
<div class="slideshow">
[....]
<div class="promobod3"><!--BEGINS PROMOBOD3-->
<div class="slideshow">

我已经把它扔进了jsfiddle——虽然[虽然，真的，你应该早点这样做。通过 500 毫秒的超时，我可以看到幻灯片转换得更快。 css 似乎关闭了，但我没有深入研究 css。还有很多其他问题需要处理。

【讨论】：

现在他们都没有骑自行车了：c