Question

我很遗憾在这里问，因为我相信这将是一个简单的任务，但我无法弄清楚如何使用jQuery来构建它，因为我还在学习。

我们正在尝试清理一个编码错误的网站，其中包含javascript动画，所以我想通过将每个部分转换为jQuery而不是DHTML / Javascript黑客来简化开发，这是一个很难维护的问题。

情况

我有一个名为

的“显示图像”的两个DIV

<div id="fader"></div> /* the shown object */

然后在HTML的某处，我有一个用户定义的图像列表，显示在该推子容器中。

图像位于我称之为

的容器中

        <div id="fadercontent"></div>

像这样：

        <div id="fadercontent">
                <div><img src="image0101.jpg" width="200" height="200" border="0" alt="" /></div>
                <div><img src="image0444.jpg" width="200" height="200" border="0" alt="" /></div>
                <div><img src="image0256.jpg" width="200" height="200" border="0" alt="" /></div>
                <div><img src="image6821.jpg" width="200" height="200" border="0" alt="" /></div>
        </div>

此列表的大小可能不同，有些有1张图片，有些有20张... DIV的原因是我可能会在某天将其从IMG更改为其他内容。所以我想抓住DIV +所有内容并将这个“DIV”淡入“推子”对象。

解决方案/想法

我试图先在阵列中收集它们。通过从fadercontent DIV中获取列表。

类似的东西：

var fadercontent = $('#fadercontent').children();

然后我会从fadercontent中取出第一项并替换“#fader”的内容

我已经发现$（“#fader”）。html（...）是我如何替换内容而fadeIn（）将是不透明度的推子。

我无法弄清楚的是：

1）如何跟踪下一个项目，例如：找到fadercontent对象中的下一个，以便我可以循环列表。在javascript中我使用了数组长度和一个简单的计数器。

2）如何设置动画速度。尝试建立淡入2秒，然后暂停1秒，然后2秒淡出，替换图像，2秒淡入（循环）。或许需要jQuery.Animate吗？

希望有jQuery人才的人会向我展示我需要进一步发展的事情。

Answer 1

下面的代码将循环遍历faderContent的每个子项，并替换fader的html ......它将继续前进，并在它到达结尾时从头开始

var index = -1;
var max = $("#fadercontent").children().length;
FadeNext();

function FadeNext() {
    index++;
    // check if at the end, otherwise start over
    if (index >= max) index = 0;

    // if #fader has no children, fadeOut will never be executed
    if ($("#fader").children().length > 0) {
        $("#fader").children().fadeOut(2000, DoFade);
    }
    else DoFade();
}

function DoFade() {
    // clone the object rather than move it so you can use it again.
    var $clone = $("#fadercontent").children().eq(index).clone().hide();

    $("#fader").html($clone);
    // fade in
    $("#fader").children().fadeIn(2000, function() {        
        FadeNext();
    });
}

工作示例：http://jsfiddle.net/Jruns/2/

如何使用jQuery淡入/淡出图像列表中的单个图像

1 个答案: