1

好的，我使用脚本设置了一些引导缩略图，该脚本可以随机播放缩略图中的图像或该部分a中的元素，li除了某些图像比其他图像更大/更小之外，该部分工作正常。我希望图像在随机播放时调整大小以匹配<li class="span#">在 JavaScript 中是否可以使用我拥有的功能中允许的空间？

引导缩略图：

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

Javascript：

    <script> window.onload = function()
                {
                   $('ul#list li img').shuffle();
                };
         </script>

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

在 css中span#看起来像这样：

 .span4 {
  width: 300px;
}

.span3 {
  width: 220px;
}

.span2 {
  width: 140px;
}
4

2 回答 2

0

是的。基本上找到最近的 li 并使用它的宽度/高度： 

$.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){

            // find nearest li and use its width / height
            var li = $(this).closest('li');
            var height = li.height();
            var width = li.width();
            $(this).height(height);
            $(this).width(width);

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

        return $(shuffled);

    };
于 2013-05-21T06:42:41.860 回答
0

你可以像这样洗牌 li 元素，而不是洗牌 img 元素：

$('ul#list li').shuffle();

?

我用你的代码创建了一个小提琴，它似乎工作正常：检查一下

如果您不能这样做，另一种选择是将跨度类直接添加到您的 img 元素中。

于 2013-05-21T08:24:11.467 回答