jQuery插件无法正常运行

Question

我正在设计一个网页，并且正在使用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;
}

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

Answer 1

您将包括jQuery 1.5，但是循环库中的注释显示为“ jQuery v1.7.1和更高版本支持循环插件”。 您确实应该更新到jQuery的较新版本-1.5已有2年的历史了。

每个幻灯片的div应该在下一个促销开始之前关闭； 您将在确定为最终关闭的promobod标签之后关闭它们。 您的意图和间距掩盖了其中的一些内容-您可能希望通过美化程序或执行某种格式/清除操作的IDE运行代码。 这可以帮助揭示此类错误。 （一旦我尝试缩进代码，由于不封闭的div，我发现第二个promobod是第一个promobod的孩子。使用适当的缩进在视觉上是显而易见的）。

您将幻灯片放映分配给ID“幻灯片放映”，但是您有多个具有该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。 还有很多其他问题要处理。