Question

因为我试图在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 ideded“#home”）

任何想法为什么这不起作用？

Answer 1

您的代码似乎在http://jsfiddle.net/yRJ2e/

处理正常

您的图片代码样式中存在语法错误 - 宽度使用“=”且应为“：”

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

应该是：

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

CSS＆amp; jQuery：幻灯片不...滑动

1 个答案: