如何在HTML/CSS中自动播放幻灯片

Question

我正在尝试让幻灯片中的图片自动改变。我查看了其他问题，但我发现人们使用与我不同的方法创建幻灯片，我使用了其他问题中提到的步骤，但无法运行。

下面是我的HTML代码：

<div id="slider">
<div id="slide-wrapper" class="rounded clear"> 
<script src="images\demo\slider\slideshow.js"></script>

  <figure id="slide-1"><a class="view" href="#"><img src="images/demo/slider/1.png" alt=""></a>
    <figcaption>
      <h2>Text</h2>
      <p>Text</p>
      <p class="right"><a href="#">Continue Reading &raquo;</a></p>
    </figcaption>
  </figure>
  <figure id="slide-2"><a class="view" href="#"><img src="images/demo/slider/2.png" alt=""></a>
    <figcaption>
      <h2>Text</h2>
      <p>Text.</p>
      <p class="right"><a href="#">Continue Reading &raquo;</a></p>
    </figcaption>
  </figure>
  <figure id="slide-3"><a class="view" href="#"><img src="images/demo/slider/3.png" alt=""></a>
    <figcaption>
      <h2>Text</h2>
      <p>Text</p>
      <p class="right"><a href="#">Continue Reading &raquo;</a></p>
    </figcaption>
  </figure>
  <figure id="slide-4"><a class="view" href="#"><img src="images/demo/slider/4.png" alt=""></a>
    <figcaption>
      <h2>Text</h2>
      <p> Text</p>
      <p class="right"><a href="#">Continue Reading &raquo;</a></p>
    </figcaption>
  </figure>
  <figure id="slide-5"><a class="view" href="#"><img src="images/demo/slider/5.png" alt=""></a>
    <figcaption>
      <h2>Text</h2>
      <p>Text</p>
      <p class="right"><a href="#">Continue Reading &raquo;</a></p>
    </figcaption>
  </figure>

  <ul id="slide-tabs">
    <li><a href="#slide-1">Text</a></li>
    <li><a href="#slide-2">Text<br>Text.</a></li>
    <li><a href="#slide-3">Text<br> Text</a></li>
    <li><a href="#slide-4">Text?<br>Text</a></li>
    <li><a href="#slide-5">Text?<br> Text</a></li>
  </ul>
</div>

​

这里是javascript slideshow.js失败的尝试

    var slideimages = new Array()
slideimages[0] = new Image()
slideimages[0].src = "1.png"
slideimages[1] = new Image()
slideimages[1].src = "2.png"
slideimages[2] = new Image()
slideimages[2].src = "3.png"
slideimages[3] = new Image()
slideimages[3].src = "4.png"
slideimages[4] = new Image()
slideimages[4].src = "5.png"


var step=0

function slideit(){
 if (!document.images)
  return
 document.getElementById('slide').src = slideimages[step].src
 if (step<2)
  step++
 else
  step=0
 setTimeout("slideit()",2500)
}

slideit()

.js文件的同一文件夹中的图片

提前谢谢你

Answer 1

jQuery选项：

Click Here for Demo.

function startSlides(start, end, delay) {
    setTimeout(slideshow(start,start,end, delay), delay);
}
function slideshow(frame, start, end, delay) {
    return (function() {
    $('#slideshow' + frame).fadeOut();
    if (frame == end) { frame = start; } else { frame += 1; }
    setTimeout(function(){$('#slideshow' + frame ).fadeIn();}, 850);
    setTimeout(slideshow(frame, start, end, delay), delay + 850);
})
}
// usage: startSlides(first frame, end frame, delay time);
startSlides(1, 4, 5000);

和..另一个jQuery选项：

Click Here for Demo.

$(function () {
    $("img").hide();
    $("img").first().show();
    $("img").click(function () {
      $(this).hide();
      if ($(this).next().length === 0) {
        $("img").first().show();
      } else {
        $(this).next().show();
      }
  });
});

和#1. CSS3选项！

Click Here for Demo.

.items {
    width:999px;
    -webkit-animation: hscroll 12s infinite;
    -moz-animation: hscroll 12s infinite;
    -ms-animation: hscroll 12s infinite;
}

@-webkit-keyframes hscroll {
  0%   { margin-left: 0; }
27.33%  { margin-left: 0 }
  33.33%  { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
  100%  { margin-left: 0 }
}

@-moz-keyframes hscroll {
  0%   { margin-left: 0; }
27.33%  { margin-left: 0 }
  33.33%  { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
  100%  { margin-left: 0 }
}

@-ms-keyframes hscroll {
  0%   { margin-left: 0; }
27.33%  { margin-left: 0 }
  33.33%  { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
  100%  { margin-left: 0 }
}