在加载/选择时随机化图库

马修·特兰特

这是我的第一个问题,因此对任何格式问题,由于无知而遗漏或过度解释我深表歉意。我几乎对Java完全陌生,经过一天的尝试修改后,我决定寻求帮助。

当前:我有一个无序列表,用作选择器以显示与其关联的画廊。我正在尝试做的是修改下面的代码,以使图像以随机顺序加载,而不是默认顺序(按上次添加的顺序加载)。我一直在尝试使用Fisher Yates方法,但是我要么实现错误,要么感到困惑。任何帮助将不胜感激,并感谢您抽出宝贵的时间阅读本文。

 $('#artist-list li').click(function(event){
    event.preventDefault();
    var artist = $(this).attr('data-artist');

    // Highlight selected menu item
    $('#artist-list li').removeClass('active');
    $(this).addClass('active');

    // Show selected artist bio
    $('.artist-bio, .artist-image').hide();
    $('#artist-'+artist+', #artist-image-'+artist).show();

    $('#image-list li').not('.primary').hide();
    $('#image-list li.'+artist).show().children('a').attr('rel', artist);
}); // End click

$('#artist-list.departments li').click(function(event){
    event.preventDefault();
    var artist = $(this).attr('data-dept');

    // Highlight selected menu item
    $('#artist-list li').removeClass('active');
    $(this).addClass('active');

    // Show selected artist bio
    $('.artist-bio, .artist-image').hide();
    $('#artist-'+artist+', #artist-image-'+artist).show();

    $('#image-list li').not('.primary').hide();
    $('#image-list li.'+artist).show().children('a').attr('rel', artist);
}); // End click
汉莱特座位

我发现这个有用的小插件可以为您整理列表:

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

并在列表中进行操作,如下所示:

<ul id="gallery">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

叫它:

$('#gallery li').shuffle();

jsFiddle:http : //jsfiddle.net/hescano/4XFQr/

资料来源:http : //css-tricks.com/snippets/jquery/shuffle-dom-elements/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

重新加载页面时随机化内容而不循环

来自分类Dev

Javascript:如何在页面加载时随机化图像

来自分类Dev

通过随机化器选择布尔

来自分类Dev

Qualtrics答案选择随机化降序

来自分类Dev

页面加载时Vue.js中元素的随机化/随机排序

来自分类Dev

悬停时的jQuery颜色随机化

来自分类Dev

悬停时的jQuery颜色随机化

来自分类Dev

在采摘时随机排列数组或随机化索引?

来自分类Dev

为随机化器选择合适的类名

来自分类Dev

PHP将选择选项的顺序随机化

来自分类Dev

Cassandra是否选择*随机化起始节点?

来自分类Dev

单击时如何随机化元素的位置

来自分类Dev

单击按钮时随机化数组中的颜色

来自分类Dev

随机化脚本无法随机化

来自分类Dev

随机化UIImageView的图像

来自分类Dev

随机化顶点位置

来自分类Dev

如何随机化点击

来自分类Dev

如何随机化JSON

来自分类Dev

快速随机化高清?

来自分类Dev

PHP区块随机化

来自分类Dev

随机化画廊数组

来自分类Dev

随机化数组值

来自分类Dev

如果页面加载中的元素随机化并显示给定的数字

来自分类Dev

有没有办法随机化我选择的 OpenVPN 服务器?

来自分类Dev

MySQL 选择有序行,然后随机化结果

来自分类Dev

如何使用php随机化内容?

来自分类Dev

随机化SimpleXML对象结果

来自分类Dev

gMap路线的颜色随机化

来自分类Dev

JS将lineTo随机化