Question

我想构建一个脚本，在加载页面时将外部文件加载到DIV中，然后在内容完全加载后立即淡出内容。然后我想显示第一个div为60秒，然后淡出第一个div并在第二个div完全加载后淡出第二个div。

现在我必须在我的脚本中使用不同的进程，所以现在它重新加载div的内容，当它可见时...我想在它淡入之前重新加载div，然后显示60秒，并执行相同的过程与下一个div。

任何人都可以帮助我吗？我在这里尝试过很多东西，但是不能按照我的意愿去做。

这是我到目前为止的代码;

<html>
<head>
<title>
    Title
</title>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var divs = $('.fade');

function fade() {
    var current = $('.current');
    var currentIndex = divs.index(current),
        nextIndex = currentIndex + 1;

    if (nextIndex >= divs.length) {
        nextIndex = 0;
    }

    var next = divs.eq(nextIndex);

    next.stop().fadeIn(3000, function() {
        $(this).addClass('current');
    });

    current.stop().fadeOut(3000, function() {
        $(this).removeClass('current');
        setTimeout(fade, 60000);
    });
}

fade();
});//]]>

</script>

<script type="text/javascript">
$.ajaxSetup(
{
    cache: false,
    async:false
});
$(document).ready(function(){

    $('#div1').load('content1.php');
    $('#div2').load('content2.php');
    $('#div3').load('content3.php');
    $('#div4').load('content4.php');
    $('#div5').load('content5.php');

});
function div1()
{
 $('#div1').load('content1.php');
}
setInterval('div1()', 50000);

function div2()
{
 $('#div2').load('content2.php');
}
setInterval('div2()', 50000);

function div3()
{
 $('#div3').load('content3.php');
}
setInterval('div3()', 50000);

function div4()
{
 $('#div4').load('content4.php');
}
setInterval('div4()', 50000);
</script>

<style>
body {margin:0;}
.fade {position:absolute; top:0; left:0; display:none;}
.current {z-index:999;}
</style>

</head>
<body>

<div id="wrapper">
    <div id="div1" class="fade current"></div>
    <div id="div2" class="fade"></div>
    <div id="div3" class="fade"></div>
    <div id="div4" class="fade"></div>
    <div id="div5" class="fade"></div>
</div>

</body>
</html>

Answer 1

这是执行此操作的一个概念：

$.ajaxSetup({
    cache: false,
    async:true          // you really want to allow async ajax
});

$(document).ready(function(){

    var divs = $();

    function markLoaded() {
        var self = $(this);
        self.data("loaded", true);

        function next(item) {
            // if we're the current item and we are loaded
            // then show us.  If we're not yet loaded, then do
            // nothing here and we will get shown when
            // markLoaded is called
            if (item.hasClass("current") && item.data("loaded")) {
                item.fadeIn(3000, function() {
                    // move current to the next one
                    item.removeClass("current");
                    var index = (divs.index(item) + 1) % divs.length;
                    var nextItem = divs.eq(index);
                    // display for 60 seconds before fading out
                    item.delay(60 * 1000).fadeOut(3000, function() {
                        nextItem.addClass("current");
                        // Now that this is hidden and we're temporarily done with, 
                        // reload the content for this div for the next time it is displayed.
                        // This will essentially preload the content so it should be ready
                        // when it's time to display this div.
                        item.data("loaded", false);
                        item.load(item.data("url"), markLoaded);
                        // now get the next item going
                        next(nextItem);
                    });
                });
            }
        }
        next(self);
    }

    // hide all the divs and start the content loading into them
    for (var i = 1; i <= 5; i++) {
        var item = $("#div" + i);
        var content = 'content' + i + '.php';
        item.data("url", content);
        divs = divs.add(item);
        item.hide().load(content, markLoaded);
    }
});

模拟在这里工作：http://jsfiddle.net/jfriend00/seLet/

以下是一般逻辑：

始终对Ajax调用使用异步 - 非异步锁定浏览器，这对用户体验非常不利。
div都是循环加载的（而不是复制代码）。
当任何div完成加载时，如果它有class="current"（只有一个会有那个），则会显示
这显然会首先显示div1，因为它是唯一具有class="current"
div1淡入后，它会删除＆＃34;当前＆＃34;自己上课
然后计算下一个div，淡出显示的div，将"current"类添加到新的div并调用next(nextItem)。
一旦div完成淡出，我们会重置它的状态并告诉它再次加载新内容，以便下次显示时会有新内容（预加载内容）
如果该div已完成加载，则会开始淡入
如果还没有完成加载，那么代码什么都不做，它会在加载完成后显示，并在其上调用markLoaded。

加载计时器时jQuery fadein

1 个答案: