jQuery插件将无法正常运行

我正在设计一个网页，我正在使用jQuery循环代码。事情是，有三个我想要代码运行，但它只是运行一个，而其他人就像他们没有“编程”。我不知道我做错了什么。我还在三个信息框中使用相同的文本，并在代码工作后更改它们。jQuery插件将无法正常运行

这里是我的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; 
}

我非常感谢您的帮助和原谅我的英语水平。

来源

2013-11-15 user2997419

循环插件的源代码和注释http://jquery.malsup.com/cycle/ –

你可以在http://jsfiddle.net上嘲笑这个，这样我们就可以看到你遇到的问题了吗？ –

第一个“矩形信息”是骑自行车，而另外两个不是，应该骑自行车的信息在相应信息的顶部。 – user2997419

您正在使用jQuery 1.5，但关于循环库状态的注释“循环插件在jQuery v1.7.1和更高版本上受支持”。你真的应该更新到更新版本的jQuery - 1.5约2岁。

每个幻灯片的div应该在下一个promobod开始之前关闭;在您确定为最终关闭promobod标签后，您将关闭它们。您的indendation和spacing会隐藏其中的一部分内容 - 您可能希望通过美化程序或执行一些格式化/清理的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这一点 - 人[不过，说真的，你应该这样做的更早。有500毫秒的超时时间，我可以看到幻灯片更快地转换。 CSS似乎没有了，但我没有深入CSS。还有足够的其他问题需要处理。

来源

2013-11-15 18:58:05

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

jQuery插件将无法正常运行

回答

相关问题