2

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

    <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，然后使用 fadeOut，然后使用 fadeIn 图像，但无论我做什么都行不通。

我试图沿着这条线走：

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

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

        });
    </script>
4

5 回答 5

5

你可以试试这个。

$(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/

于 2012-10-23T09:27:04.443 回答
1

jsBin 演示

刚刚修改了 Fademe jQuery 插件以删除鼠标悬停，因为您使用全屏图像:)：

(function($){
    $.fn.fademe = function(F,P,S){
        F=F||700;
        P=P||3000;
        S=S-1||0;       
        var e=this.children(), T;
        function a(){ e.eq(S=++S%e.length).fadeTo(F,1).siblings(e).stop(1).fadeTo(F,0); }
        e.eq(S).show().siblings(e).hide();
        function aa(){T=setTimeout(function(){a();aa();},F+P);}aa();
    };
})(jQuery);



// USE PLUGIN:
$(function(){    
  $('.container').fademe();  
});
于 2012-10-23T09:15:37.823 回答
0

试试这个代码：

<script type="text/javascript">
        $(document).ready(function() {
            var intervalId = setInterval(function() {
              $('.container').find('img').each(function(i) { 
                $(this).fadeOut();
              }); 
            $(this).data('intervalId', intervalId);
        });
    </script>
于 2012-10-23T09:08:18.993 回答
0 
<script>
function showImage1()
{
    $('#IDimage1').show();
    setTimeout(showImage2,3000);
}

function showImage2()
{
   $('#IDimage1').hide();
   $('#IDimage2').show();
}
</script>

好吧，这只是最简单的方法，除此之外，您可以尝试从 JQuery 切换或淡入/淡出功能

于 2012-10-23T09:47:37.087 回答
0

使用插件 jquery-timing它是一个单行：

$.repeat(1000).$('#container img:first').hide().appendTo('#container').fadeIn();

参见小提琴：http: //jsfiddle.net/creativecouple/zjUEs/

于 2012-10-24T08:00:49.537 回答