<!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中消失
即使你洗牌工作正常,我也无法弄清楚为什么他们不会褪色答案 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);