0

当我试图在 CSS 和 jQuery 的帮助下制作幻灯片时（实际上是从教程中撕下来的..），我意识到只有最后一张图片正在显示，而且幻灯片没有“旋转”
我有 css：

#home{
    color: #e3e3e3;
    margin: 0 auto;
    height: 30%;
    width: 30%;
    position: relative;
    top: 5%;
    opacity: 1;
    text-align: justify;}
#slideshow {
    margin: 0px auto;
    position: relative;
    top: 2%;
    width: 500px;
    height: 350px;
    padding: 5px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);}
#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;}

jQuery：

$(document).ready(function(){
  $("#slideshow > div:gt(0)").hide();
  setInterval(function() {
    $("#slideshow > div:first")
      .fadeOut(1000)
      .next()
      .fadeIn(1000)
      .end()
      .appendTo("#slideshow");
  },3000);
}

和 html ：

<div id="home">
<div id="slideshow">
<div>
    <img src="./images/mulsanne.jpg" title="Black Mulsanne by ProTech" alt="Black Mulsanne" style="height:350px;width=500px"/>
</div>
<div>
    <img src="./images/murcielago.jpg" title="Orange Lamborghini Murcielago by ProTech" alt="Orange Murcielago" style="height:350px;width=500px"/>
</div>
<div>
    <img src="./images/BrabusK8.jpg" title="Black Brabus K8 by ProTech" alt="Black K8" style="height:350px;width=500px"/>
</div>
<div>
    <img src="./images/superleggera.jpg" title="Grey Lamborghini Superleggera by ProTech" alt="Grey Superleggera" style="height:350px;width=500px"/>
</div>
<div>
    <img src="./images/slr.jpg" title="Black Mercedes SLR by ProTech" alt="Black SLR" style="height:350px;width=500px"/>
</div>
</div>
<br>
Represented in more than XX countries, and exclusive distributor in Kazakhstan since 2009, ProTech's aim is to offer the best services in terms of car paint protection and windows enhancements, with exclusive Kevlar-coated films with various effects.<br>
Find more about us by clicking on the 2 buttons on the left side of this webpage !
</div>

（最后几行文字在幻灯片下方，只是为了向您展示我有一个 div id'ed "#home" 的原因）

知道为什么这不起作用吗？

4

1 回答 1

1

您的代码似乎在这里工作正常http://jsfiddle.net/yRJ2e/

您的图像标签样式中有语法错误 - 宽度使用“=”并且应该是“：”

 style="height:350px;width=500px"

应该：

 style="height:350px;width:500px"
于 2012-06-05T12:20:52.333 回答