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开始前关闭;在你确定为最终结束的promobod-tag之后你就关闭了它们。你的压痕和间距隐藏了一些 - 你可能想通过美化器或做一些格式化/清理的IDE来运行代码。这可以帮助揭示这种错误。（一旦我试图缩进代码，我发现第二个promobod是第一个的孩子，由于unclosed-div。适当的缩进在视觉上很明显）。

您将幻灯片显示分配给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 - al [虽然，真的，你应该早点这样做。在超时500毫秒的情况下，我可以看到幻灯片的转换速度更快。 css似乎关闭了，但我没有深入研究css。还有其他问题需要处理。

jQuery插件无法正常运行

1 个答案: