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

Answer 2

此代码位于您的点击侦听器中，并使用阵列中的srcs创建图像。然后，您可以删除new Image()。这不是一个有效的实现，但它适用于小页面。它涉及对原始代码的最小更改。

$('button.array').click(function () {
    arr = $.shuffle(arr);
    $('#array').text(arr.join(", "));

    // Added:
    $(".thirdcanvas").html(""); // empties container
    for (var i=0; i<arr.length ;i++){
        // Add an image
        $(".thirdcanvas").append($("<img src='" + arr[i] + "'>"));
    }

});

Answer 3

看起来你拥有所需的所有部件。我们只需要获取图片链接并从中创建<img>元素，然后将它们附加到<div>。然后可以直接在<div>上调用随机函数，以便将图像移动到位，而无需再次使用原始数组。

类似的东西：

$(document).ready( function() { 
    var arr = new Array("http://placehold.it/50x50&text=a", "ihttp://placehold.it/50x50&text=b", "http://placehold.it/50x50&text=c", "http://placehold.it/50x50&text=d", "http://placehold.it/50x50&text=e");

    for(var i=0; i<arr.length; i++) {
      var img = new Image();
      img.src = arr[i];
      $('#array').append(img);
    }

    $('button.array').click(function(){
      $('#array').shuffle();
    });
});

(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);

jsfiddle：http://jsfiddle.net/ygaw2/

这使用for循环遍历链接数组，因此数组可以包含所需数量的链接。

Answer 4

您永远不会创建<img>元素，这就是您只看到网址的原因这是你应该使用的代码：

// your bunch of pictures
var arr = new Array(
    "http://placehold.it/100x100", 
    "http://placehold.it/120x100", 
    "http://placehold.it/140x100", 
    "http://placehold.it/160x100", 
    "http://placehold.it/180x100"
);

// Refresh pictures
function refreshPictures() {
    // Create new DOM element    
    var pictures = $('<ul id="pictures"></ul>');
    for(var i=0, n=arr.length; i<n; i++) {
        pictures.append('<li><img src="'+arr[i]+'"/></li>');
    }
    // Replace current element by new one
    $('#pictures').replaceWith(pictures);
}

// Add click listener on #randomize button
$('#randomize').on('click', function(){
    arr = arr.shuffle();
    refreshPictures();
});

// Initialize pictures
refreshPictures();

// Add shuffle() function to Array prototype
Array.prototype.shuffle = function() {
    for(var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x);
    return this;
};

ul {
    list-style: none;
    padding: 0;
}
li {
    float: left;
    margin: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul id="pictures"></ul>
<button id="randomize">Shuffle</button>

随机播放一系列图像jquery

4 个答案: