1 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
.slide{
    position:absolute;
    left:0px;
    top:0px;
    z-index:6;
    display: none;
}
</style>
<script type="text/javascript">
$(window).load(function () {
    var countx = $('.slide').length;
    //alert("count " +countx);
    var i;
    var slidearray = new Array();
    for (i = 0; i < countx; i++) {
        slidearray[i] = i;
    }
    slidearray = shuffle(slidearray);
    var t;
    var pointx;
    for (t = 0; t < slidearray.length; t++) {
        pointx = slidearray[t];
        action(pointx);
    }
});

function action(id) {
    var kex = "#slide" + id;
    //alert(kex);
    if (id == 0) {
        x = 0;
    } else {
        x = id * 3500;
    }
    $(kex).delay(x).fadeIn(1000).delay(2500).fadeOut(1000);
}

function shuffle(array) {
    var m = array.length,
        t, i;
    while (m) {
        i = Math.floor(Math.random() * m--);
        t = array[m];
        array[m] = array[i];
        array[i] = t;
    }
    return array;
}
</script>
</head>

<body>

<div id ="slide0" class="slide">Slide 0</div>
<div id ="slide1" class="slide">Slide 1</div>
<div id ="slide2" class="slide">Slide 2</div>
<div id ="slide3" class="slide">Slide 3</div>
<div id ="slide4" class="slide">Slide 4</div>



</body>

スライドのクラスを持つすべての div を読み取り、それを配列にロードし、その配列をシャッフルしてから、シャッフルされた順序で 1 つずつ div をフェードしようとしています。

divのインをフェードインしようとするまで、すべてうまく機能します。それらは常に0,1,2,3,4でフェードインします

シャッフルが正しく機能していても、シャッフルでフェードインしない理由がわかりません

4

1 に答える 1

2 
x = id * 2500;

idここでは、シャッフルに関係なく、常に要素のインデックス (配列のインデックスではありません) です。したがって、遅延は常に 0 の場合は最短、1 の場合は長く、2 の場合はさらに長くなります。配列内の順序とは完全に無関係です。配列の順序による唯一の違いは、関数が呼び出される順序であり、 の値には関係ありませんx。

代わりにこれを試してください：

function action(id, arrayIndex) {

    var kex = "#slide" + id;
    //alert(kex);

    var x = arrayIndex * 2500;

    $(kex).delay(x).fadeIn(1000).delay(500).fadeOut(1000);
}

そしてそれをこのように呼びますaction(pointx, t);

http://jsfiddle.net/8jkDh/

于 2013-08-26T21:32:15.550 に答える