Question

我有自举，我设置了缩略图来显示一组图片。我希望缩略图保持不变。但是我希望图片在缩略图中更改，并使图像的大小适应缩略图。

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

我想让图片在不同的缩略图之间进行随机播放，并调整它的大小以匹配它所在的缩略图。

我目前有这个脚本在页面周围缩略图:(我不想要的）

(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

图片随机播放

1 个答案: