如何使用javascript制作简单的自动播放幻灯片？

Question

我想制作一个简单的幻灯片,在页面加载时自动播放.到目前为止,这是我的代码:

HTML:

<div id="slideshow">
   <div>
      <img src="slide_1.png">
   </div>   
   <div>
      <img src="slide_2.png">
   </div>
   <div>
       <img src="slide_3.png">
   </div>
</div>

CSS:

#slideshow {  

    position: relative; 

    width: 900px; 

    height: 450px;  

}

#slideshow > div { 

    position: absolute; 

}

如果可能,有人可以提供一个JavaScript代码,它将自动播放幻灯片,以及使用幻灯片转换更改幻灯片,并在用户仍然在页面时重播无限次吗？此外,也许是右下角有数字的导航.这是我正在寻找的一个例子:(http://www.http://www.suprafootwear.com/).顶部的大型幻灯片是我想要的,唯一的区别是我希望过渡是线性滑动而不是淡入淡出过渡.请保持900px x 450px的尺寸.任何帮助表示赞赏.先感谢您!

Answer 1

如果你想在加载时无限重复而没有按钮来控制它,则不需要JavaScript.使用CSS关键帧动画或过渡.

请看:
http ://coding.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/ http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/