Question

我一直试图找到一种方法来创建幻灯片并指定每张图片之间的时间。然后在序列之后，我想显示/显示主页。

我并没有很多JavaScript经验，所以任何帮助都会受到赞赏。

Answer 1

您应该使用setTimeout函数在每个函数之间放置时间。然后使用功能更改图片，使其看起来像是幻灯片。

示例：3秒后调用该功能发出警报。

function myFunction() {
    setTimeout(function(){ alert("Hello"); }, 3000);
}

你可以在google上找到数以百万计的实例，用JS来计时。

祝你好运

Answer 2

有很多方法可以做，这是一个简单/基本的例子：

＆＃13;

jQuery.fn.reverse = [].reverse; /* Just a helper */
var slideshowContainer = $('.slideshow');
var slideshowItems = slideshowContainer.find('.item').reverse();
var slideshowItemsTotal = slideshowItems.length;
slideshowItems.each(function(i) {
    var thisItem = $(this);
    setTimeout(function() {
        thisItem.fadeOut(1000, function() {
            thisItem.remove();
            if( i+1==slideshowItemsTotal ) {
                slideshowContainer.remove();
            };
        });
    }, i*5000+4000);
});

＆＃13;

* {
    margin: 0 none;
    box-sizing: border-box;
}
.slideshow {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}
.slideshow .item {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Page header</h1>
<p>Page content.</p>
<div class="slideshow">
    <img class="item" src="http://placehold.it/800x600/00ff00/333" />
    <img class="item" src="http://placehold.it/800x600/ff0000/111" />
</div>

＆＃13;

同样在JSFiddle。

如何在显示页面之前创建幻灯片？

2 个答案: