javascript - 随机播放一组图像jquery

Question

我想用 jquery 随机排列一组图像。问题是“直到现在我做了一些不显示图像的事情......它只显示它们的路径。我错在哪里？

代码在这里:

HTML:

<div id="array" class="thirdcanvas"></div>
<button class="array">Shuffle</button>

JS:

jQuery(function($){

$(document).ready( function() 
{ 
    $('#array').shuffle(); 
}); 

    var arr = new Array("images/alfabet/a.png", "images/alfabet/b.png", "images/alfabet/c.png", "images/alfabet/e.png", "images/alfabet/f.png");
    $('#array').text(arr.join(", "));
    $('button.array').click(function(){
        arr = $.shuffle(arr);
        $('#array').text(arr.join(", "));

    });
});

var image6 = new Image();
   image6.src = "images/alfabet/a.png";
   var image7 = new Image();
   image7.src = "images/alfabet/b.png";
   var image8 = new Image();
   image8.src = "images/alfabet/c.png";
   var image9 = new Image();
   image9.src = "images/alfabet/e.png";
   var image10 = new Image();
   image10.src = "images/alfabet/f.png";



(function($){

    $.fn.shuffle = function() {
        return this.each(function(){
            var items = $(this).children().clone(true);
            return (items.length) ? $(this).html($.shuffle(items)) : this;
        });
    };

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

})(jQuery);

Answer 1

尝试

jQuery(function ($) {

    var arr = new Array("//placehold.it/32/ff0000.png", "//placehold.it/32/00ff00.png", "//placehold.it/32/0000ff.png", "//placehold.it/32/ff00ff.png", "//placehold.it/32/00ffff.png");

    $.each($.shuffle(arr), function (_, src) {
        $('<img />', {
            src: src
        }).appendTo('#array')
    })
    $('button.array').click(function () {
        $('#array').shuffle()
    });
});

(function ($) {

    $.fn.shuffle = function () {
        var _self = this,
            children = $.shuffle(this.children().get());
        $.each(children, function () {
            _self.append(this)
        })
        return this;
    };

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

})(jQuery);

演示:Fiddle