Jquery读取具有特定类的项目,随机播放并以新顺序显示它们,

时间:2013-08-26 20:30:46

标签: jquery

<!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,将其加载到数组中,然后将该数组洗牌,然后以洗牌顺序逐个淡化div。

这一切都很有效,直到我试图淡化div。它们总是在0,1,2,3,4中消失

即使你洗牌工作正常,我也无法弄清楚为什么他们不会褪色

1 个答案:

答案 0 :(得分: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/