javascript - 图片随机播放

Question

我有 Bootstrap ，并且设置了缩略图来显示一组图片。我希望缩略图保持原样而不是移动。但我希望图片在缩略图内发生变化，并将图像的大小调整为它所在的缩略图。

我希望缩略图保留在一个位置并保持大小。

我希望图片在不同的缩略图之间随机播放，并调整其大小以匹配其所在的缩略图。

我目前有这个脚本，可以在页面周围随机播放缩略图:(我不想要的)

(function($){

    $.fn.shuffle = function() {

        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
           });

        this.each(function(i){
            $(this).replaceWith($(shuffled[i]));
        });

        return $(shuffled);

    };

})(jQuery);

$(function(){
$('ul#list li').shuffle();
})

缩略图标记如下所示。

<ul class="thumbnails" id="list">
    <li class="span4">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/360x270" alt="">
      </a>
    </li>
    <li class="span3">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/260x120" alt="">
      </a>
    </li>
    <li class="span2">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/160x120" alt="">
      </a>
    </li>
    <li class="span3">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/260x120" alt="">
      </a>
    </li>
    <li class="span2">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/160x120" alt="">
      </a>
    </li>
    <li class="span3">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/260x120" alt="">
      </a>
    </li>
    <li class="span2">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/160x120" alt="">
      </a>
    </li>
    <li class="span3">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/260x120" alt="">
      </a>
    </li>
    <li class="span2">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/160x120" alt="">
      </a>
    </li>
    <li class="span3">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/260x120" alt="">
      </a>
    </li>
    <li class="span2">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/160x120" alt="">
      </a>
    </li>
    <li class="span2">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/160x120" alt="">
      </a>
    </li>
</ul>

我可以对打乱缩略图的脚本进行哪些更改，使其仅打乱图像并使这些图像调整为它所在的缩略图？我已经尝试了很多才能得到这个。我希望我能把我想要的问题说得足够清楚。

Answer 1

为 img 元素提供高度和宽度属性，例如

<img src="http://placehold.it/360x270" alt="" width="360" height="270"/>

然后

(function($){

    //+ Jonas Raoni Soares Silva
    //@ http://jsfromhell.com/array/shuffle [v1.0]
    function shuffle(o){ //v1.0
        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;
    };

    $.fn.shuffle = function() {

        var srcs =  this.find('img').map(function(i, el){
            return el.src;
        });
        shuffle(srcs)

        return this.each(function(i){
            $(this).find('img').attr('src', srcs[i]);
        });
    };

})(jQuery);

$(function(){
    $('ul#list li').shuffle();
})

演示:Fiddle