循环图像

Question

我知道这很多，但我无法让它工作：/

    <div class='container'>
        <img src="images/1.jpg" alt="">
        <img src="images/2.jpg" alt="">
    </div>

所以我有 2 个图像，下面的 CSS 被固定为浏览器窗口的完整大小：

        <style type="text/css">
        .container {
            position:fixed; 
            top:-50%; 
            left:-50%; 
            width:200%; 
            height:200%;
        }
        .container img {
            position:absolute; 
            top:0; 
            left:0; 
            right:0; 
            bottom:0; 
            margin:auto; 
            min-width:50%;
            min-height:50%;
        }
    </style>

目前，它仅显示以全尺寸显示的最后一张图像 (2)。但是，我想使用一些 jQuery 来显示第一个，然后在 X 秒后淡出数字 1 并在每个图像中循环淡出。我认为最好使用 setInterval，然后使用淡入淡出和淡入淡出图像，但无论我做什么都不起作用。

我试图沿着这条线走下去：

        <script type="text/javascript">
        $(document).ready(function() {

            $('.container').children('img').each(function(i) { 
                $(this).fadeOut();
            }); 

        });
    </script>

Answer 1

你可以试试这个。

$(document).ready(function() {
    var _intervalId;

    function fadeInLastImg()
    {
        var backImg = $('.container img:first');
        backImg.hide();
        $('.container' ).append( backImg );
        backImg.fadeIn()
    };

    _intervalId = setInterval( function() 
    {
        fadeInLastImg();
    }, 1000 );

});?

这是 jsFiddle http://jsfiddle.net/KQ3wu/128/