1

我有引导程序，并且设置了缩略图以显示一组图片。我希望缩略图保持不动而不移动。但我希望图片在缩略图内发生变化，并让图像的大小适应它所在的缩略图。

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

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

我目前有这个脚本可以随机播放页面周围的缩略图：（我不想要的）

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

我可以对洗牌缩略图的脚本进行哪些更改，使其只是洗牌图像并使这些图像适应它所在的缩略图？我已经尝试了很多来得到这个。我希望我对我想要的问题足够清楚。

4

1 回答 1

0

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

演示：小提琴

于 2013-05-22T03:05:20.667 回答