Question

我有一个图像滑块，我将它们放入随机的输出顺序，但我意识到其中一个图像不断重复。有没有办法防止使用Math.random（）重复图像？

<script type="text/javascript" language="javascript">

//switch the landing page background images
function slideSwitch() {
    //set variable active
    var $active = $('#slideshow IMG.active');

    //check if attribute active exists
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    //throw images in random order
    var $sibs  = $active.siblings();
    var rndNum = Math.floor(Math.random() * $sibs.length );
    var $next  = $( $sibs[rndNum] );

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 7000 );
});

</script>

任何帮助都将非常感谢!!

Answer 1

把它想象成一副纸牌。列出要显示的所有图像，并在显示后将其从列表中删除（现在您不会选择重复项）。只需确保生成的随机数受当前列表长度的限制。

Answer 2

执行此操作的一种好方法是创建一个包含图像索引的数组（即0 ... n），对数组进行随机播放，然后在数组中递增。你可以随时重新洗牌，不过当然如果你在一次“通过”阵列结束时重新洗牌，你可能会偶然重复。

Answer 3

要实施不会重复的随机顺序，您可以执行以下操作。

定义数组中的图像：

var images = [img1, img2, img3, img4, ...]; //image objects or URLs

现在实现一个随机化该数组的自定义排序器：

images.sort(randomize);

function randomize() {
    return 0.5 - Math.random();
}

自定义排序器通过比较a和b值并返回0表示等于＆lt; 0或＆gt; 0取决于条件。这里我们只返回-0.5和+0.5之间的随机值，这意味着项目也将随机排序。

现在这个数组是随机的，你可以很好地迭代它，因为它知道它不会重复任何图像，直到你重新开始。

随机图像生成器，但永远不会重复相同的图像 - Javascript

3 个答案: