Question

我一直试图让这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>

Answer 1

示例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/

Answer 2

您可以使用an array和包含当前图像的变量，然后将它们淡入淡出。这取决于图像的存储方式。例如，如果您有一个ID为<img>的{{1}}元素，则可以执行以下操作：

myImg

如果你想要它换行，你可以做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();。如果有一堆不同的图像，你可以做同样的事情，只需保留图像的ID images[currentImage % images.length]。

Answer 3

我在下面写了一个名为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();
};

我还没有测试过，所以如果你遇到任何错误，请告诉我。

在彼此之后运行连续事件

3 个答案: