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

【问题标题】：How to make a simple auto playing slide show with javascript?如何使用 javascript 制作简单的自动播放幻灯片？
【发布时间】：2014-02-08 22:27:24
【问题描述】：

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

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 大小。任何帮助表示赞赏。先感谢您！

【问题讨论】：

slidesjs.com 可能有用。
谢谢，但我需要一个与此不同并根据我的需要定制的代码。问题是我是 JavaScript 的菜鸟。大声笑
如果你想在加载时无限重复，没有按钮来控制它，不需要 JavaScript。使用 CSS 关键帧动画或过渡。看这里：coding.smashingmagazine.com/2012/04/25/…alessioatzeni.com/CSS3-Cycle-Image-Slider
我建议awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin
我用这个例子更新了答案：alessioatzeni.com/CSS3-Cycle-Image-Slider

标签： javascript jquery html css slideshow

【解决方案1】：

试试这个简单的 javascript 代码来制作图像滑块。

<html>
<head>
    <style>
        .container{
            position:relative;
            width:100%;
            height:300px;
            border-radius:5px;
            border:1px solid red;
            overflow:hidden;
        }
    </style>
</head>
<body>
<div id="imgGallary" class="container">
    <img src="http://www.examiningcalvinism.com/kingdavid.jpg" alt="" width="100%" height="300" />
    <img src="http://www.kingjamesbibleonline.org/1611-Bible/1611-King-James-Bible-Introduction.jpg" alt="" width="100%" height="300" />
    <img src="http://biblestudyoutlines.org/wp-content/uploads/2012/07/the-triump-of-david-over-king-hadadezer-of-zobah-1024x729.jpg" alt="" width="100%" height="300" />
    <img src="http://www.cgu.edu/Images/news/Flame%20Winter12/KJV-BibleBW.jpg" alt="" width="100%" height="300" />
</div>
<script>
(function(){
        var imgLen = document.getElementById('imgGallary');
        var images = imgLen.getElementsByTagName('img');
        var counter = 1;

        if(counter <= images.length){
            setInterval(function(){
                images[0].src = images[counter].src;
                console.log(images[counter].src);
                counter++;

                if(counter === images.length){
                    counter = 1;
                }
            },4000);
        }
})();
</script>
</body>
</html>

【讨论】：

【解决方案2】：

$("#slideshow > div:gt(0)").hide();

setInterval(function() { $('#slideshow > div:first') .fadeOut(1000) 。下一个（） .fadeIn(1000) 。结尾（） .appendTo('#slideshow'); }, 3000);

【讨论】：