Question

我成功地浏览了一系列幻灯片，并用它们更新了身体html：

var slides = ['slide 1 content', 'slide 2 content', 'slide 3 content'];

function displaySlides(arr){
    $('body').html(arr[0]);
    var i = 1;
    setInterval(
        function(){
            $('body').html(arr[i]);
            i++;
            if(i >= slides.length) i = 0;
        },8000);
}
displaySlides(slides);

现在，如果我可以淡化一张幻灯片并淡化下一张幻灯片，或者换句话说在幻灯片之间做一些动画，那就太棒了。任何人都知道如何做到这一点？

谢谢！

微米。

额外问题

我想每小时刷新一次幻灯片列表（例如我将其设置为16秒）。所以我得到了下面的代码，并在16秒之后重新加载幻灯片1一段时间，但是立即继续滑动，这应该是在刷新之前的最后一张幻灯片之后。为什么会这样？我预计它只会在幻灯片1重新启动（所以只显示幻灯片1和2）。这是一个fiddle（注意：在这里，你看不到slide1出现的瞬间分裂）。

function displaySlides(arr){
    $('body').html(arr[0]);
    var i = 1;
    setInterval(
        function(){
            $('body').html(arr[i]);
            i++;
            if(i >= arr.length) i = 0;
        },8000);
}

setInterval(function() {
    var slides = ['slide 1 content', 'slide 2 content', 'slide 3 content'];
    displaySlides(slides);
}, 16000);

Answer 1

function(){
    $('body').hide('slow',
        function()
        {
            $('body').html(arr[i]);
            $('body').show('slow');
            i++;
            if(i >= slides.length) i = 0;
        }
    );
},8000);

这将使用body类淡出元素，更改它的html内容然后淡入控件。

Answer 2

您可以使用.fadeIn()和.fadeOut()来执行此操作

var i = 1;
setInterval(function () {
    $('body').fadeOut(function () {
        $(this).html(arr[i]).fadeIn()
    });
    i++;
    if (i >= slides.length) i = 0;
}, 2000);

演示：Fiddle

Answer 3

好的，找到第二个问题的解决方案：working fiddle

基本上需要清除间隔：

var si = null;

function displaySlides(arr){
    $('body').html(arr[0]);
    var i = 1;
    si = setInterval(
        function(){
            $('body').html(arr[i]);
            i++;
            if(i >= arr.length) i = 0;
        },2000);
}

setInterval(function() {
    var slides = ['slide 1 content', 'slide 2 content', 'slide 3 content', 'slide 4 content', 'slide 5 content', 'slide 6 content', 'slide 7 content', 'slide 8 content'];
    clearInterval(si);
    displaySlides(slides);
}, 5000);

身体的动画替换（循环遍历数组）

3 个答案: