在彼此之后运行连续事件

我一直试图让这个为期2天，我很抱歉我是新来的Javascript/jquery，我在学习过程中。在彼此之后运行连续事件

我试图创建一个JavaScript时，页面加载将有一个图像淡入淡出和第一个图像淡入和淡出第二，第三等，但我需要的很多。

我知道这是一个新问题，但我显然不确定此时需要寻找什么。我一直在进行研究和学习，我只想尽快完成研究和学习。

任何帮助表示赞赏。

这是我想出了这对我来说看起来完全无效，但似乎工作：

<div class="splashbg1" style="display: none;"></div> 
<div class="splashbg2" style="display: none;"></div> 
<div class="splashbg3" style="display: none;"></div> 
<div class="splashbg4" style="display: none;"></div> 
<div class="splashbg5" style="display: none;"></div> 


<script> 
$(document).ready(function() { 
    $('.splashbg1').fadeIn(1300, function() { 
    $('.splashbg1').fadeOut(1300, function() { 
    $('.splashbg2').fadeIn(1300, function() { 
    $('.splashbg2').fadeOut(1300, function() { 
    $('.splashbg3').fadeIn(1300, function() { 
    $('.splashbg3').fadeOut(1300, function() { 
    $('.splashbg4').fadeIn(1300, function() { 
    $('.splashbg4').fadeOut(1300, function() { 
    $('.splashbg5').fadeIn(1300, function() { 
    }); 
    }); 
    }); 
    }); 
    }); 
    }); 
    }); 
    }); 
    }); 
}); 
</script>

来源

2011-12-12 Opposes

欢迎来到stackoverflow你可以发布你的工作的HTML和代码，所以我们可以指向具体问题 – mcgrailm

如果你正在寻找学习; minitech有一个美丽的答案。如果您需要用于生产或使用的产品，请尝试使用jQuery的任何现有插件。搜索字词是'jQuery carousel'：http://www.agilecarousel.com/flavor_2.htm – rkw

例如HTML：

<div id="images> 
    <img src=""> 
    <img src=""> 
    ... 
</div>

例如使用Javascript：

function switchImage(){ 
    $('#images img:visible').fadeOut(function(){ 
     $(this).next().length ? $(this).next().fadeIn() : $('#images img').eq(0).fadeIn(); 
    }); 
}; 
$('#images img').hide().eq(0).show(); // show only the first image 
setInterval(switchImage, 2000); // loop through images every 2000 milliseconds

例如：http://jsfiddle.net/ampersand/nhp2v/

来源

2011-12-12 04:38:06 ampersand

非常感谢！这与我所寻找的内容更紧密地联系在一起。对不起，如何在图像末尾停止旋转？ – Opposes

此版本：http://jsfiddle.net/ampersand/nhp2v/3/会在到达最后一张图片时停止。如果您对代码有任何疑问，只需询问。 – ampersand

您可以使用an array和包含当前图像的变量，然后褪色并排出。这取决于您的图像如何存储。如果您有与myImg一个ID一个<img>元素，例如，你可以这样做：

var images = ['http://someurl.com/someimg.jpg', 'somethingelse.png', 'hello.gif']; 
var currentImage = 0; 

function next() { 
    $('#myImg').fadeOut(function() { 
     $('#myImg').prop('src', images[currentImage]).fadeIn(); // Set the image and fade in 
     currentImage++; // Get ready for the next image 
    }); 
} 

next();

如果你想让它来包装，你可以做images[currentImage % images.length]。如果有大量不同的图像，则可以做同样的事情，只需将图像的ID保留在images中。

来源

2011-12-12 04:30:52 Ryan

我写了一个快速函数下面称为sequence。使图像的列表中，您想使用jQuery选择这样的动画：

var list = [ 
    $('first'), 
    $('second'), 
    $('third') 
    ];

然后调用下面的函数像这样的东西sequence(list, 200, function(){});

var sequence = function(array, duration, callback){ 
    var list = array, 
     length = list.length, 
     i = 0, 
     duration = duration, 
     callback = callback; 

    function chainFade(){ 
     if(i < length) 
      array[i].fadeIn(duration) 
        .fadeOut(duration, function(){ 
         i++; 
         chainFade(); 
        }); 
     else 
      typeof callback == 'function' && callback(); 
    } 
    chainFade(); 
};

我没有测试它却又如此让我知道如果你遇到任何错误。

来源

2011-12-12 05:43:59 THEtheChad

在彼此之后运行连续事件

回答

相关问题