0

我有一个 HTML 幻灯片菜单。具有以下内容：

<div class="slide">
<img typeof="foaf:Image" class="image-style-mylogo" src="http://site.com/1.png" alt="">
<img typeof="foaf:Image" class="image-style-mylogo" src="http://site.com/2.png" alt="">
<img typeof="foaf:Image" class="image-style-mylogo" src="http://site.com/3.png" alt="">
<img typeof="foaf:Image" class="image-style-mylogo" src="http://site.com/4.png" alt="">
<img typeof="foaf:Image" class="image-style-mylogo" src="http://site.com/5.png" alt="">
<img typeof="foaf:Image" class="image-style-mylogo" src="http://site.com/6.png" alt="">
</div>

我想要，每次刷新都随机排序图像。我使用了这段代码：

function reorder() {
    var grp = $(".slide").children();
    var cnt = grp.length;

    var temp, x;
    for (var i = 0; i < cnt; i++) {
        temp = grp[i];
        x = Math.floor(Math.random() * cnt);
        grp[i] = grp[x];
        grp[x] = temp;
    }
    $(grp).remove();
    $(".slide").append($(grp));
}

function orderPosts() {
    $(".slide").html(orig);
}​

但不要工作。我可能做错了什么？

4

4 回答 4

2

有一种更简单的方法可以做到这一点。由于 jQuery 集合类似于 Array，因此您可以在它们上调用原生 Array 原型。因此，使用 native Array.sort，您的代码将被重写如下：

var grp = $(".slide").children(); // the original collection, if you want to save it...

Array.prototype.sort.call(grp, function() {
    return Math.round(Math.random())-0.5;
});

$('.slide').empty().append(grp);

这是一个演示：http: //jsfiddle.net/JTGfC/

于 2012-12-21T13:58:17.200 回答
1

我不确定这是否是 100% 洁净，但你可以在这里应用 Fisher-Yates，而不依赖于 jQuery。

fisherYates(document.getElementsByClassName('slide')[0]);

// Fisher-Yates, modified to shuffle DOM container's children instead of an array.
function fisherYates (node)
{
  var children = node.children,
  n = children.length;

  if (!n) {
    return false;
  }

  while (--n) {
     var i = Math.floor( Math.random() * ( n + 1 ) ),
     c1 = children[n];

     node.insertBefore(c1, children[i]);
   }
}

演示

于 2012-12-21T13:58:32.417 回答
0

你的reorder()功能很好，我在这个小提琴中测试了它：http: //jsfiddle.net/kokoklems/YpjwE/

虽然我没有使用第二个功能orderPosts()......

于 2012-12-21T13:56:14.713 回答
0

这应该为你做：

function reorder() {
    var grp = $(".slide").children();
    var cnt = grp.length;

    var indexes = [];
    // Build a array from 0 to cnt-1 
    for (var i = 0; i < cnt; i++) {
        indexes.push(i);
    } 
    // Shuffle this array. This random array of indexes will determine in what order we add the images.
    indexes = shuffle(indexes);

    // Add the images. (No need to remove them first, .append just moves them)
    for (var i = 0; i < cnt; i++) {
        $(".slide").append($(grp[indexes[i]]));
    }
}

function shuffle(o){
    for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
}

洗牌功能源码

工作示例（我使用跨度而不是图像，以更好地显示结果）

于 2012-12-21T13:56:32.297 回答