Javascript幻灯片以随机顺序显示

Javascript slideshow in random order

本文关键字：顺序 显示 随机 幻灯片 Javascript      更新时间：2023-09-26

我的幻灯片目前以非随机顺序显示图像，但我希望它是随机的。

jsfiddle:

http://jsfiddle.net/6hCaJ/

Javascript: 

function loadNextImage(useRandomSelection) {    
    if(imagePool.length > 0) {
        if(useRandomSelection) {
            var randomIndex = Math.floor(Math.random() * imagePool.length);
            var imgData = imagePool.splice(randomIndex,1);
        } else {
            var imgData = imagePool.shift();
        }
        $(".back-image-container").append("<img id='back-image-" + imgData.id + "' class='back-image' src='" + imgData.url + "'/>");
        var imgObj = $("#back-image-" + imgData.id);        
        imgObj.hide();
        if ( imgObj.complete || imgObj.readyState == 4 || imgObj.readyState == "complete") {
            loadCompleted(imgObj,useRandomSelection);
        } else {
            imgObj.load(function() {
                loadCompleted(imgObj,useRandomSelection);     
            });
        }
    }
}
HTML: 

<div class="back-image-container">
    <img id="back-image-0" class="back-image" src="http://cdn2.bigcommerce.com/n-pktq5q/b2aus7wd/product_images/theme_images/scorpiongoldberlin.jpg?t=1403886381" style="width: 1347px; height: 898px; left: -63px; display: inline;">
    <img id="back-image-1" class="back-image" src="http://cdn2.bigcommerce.com/n-pktq5q/b2aus7wd/product_images/theme_images/brelingirlcross2.jpg?t=1403886381" style="width: 1347px; height: 898px; left: -63px; display: none;">
    <img id="back-image-2" class="back-image" src="http://cdn2.bigcommerce.com/n-pktq5q/b2aus7wd/product_images/theme_images/brelinafternoon.jpg?t=1403886381" style="width: 1347px; height: 898px; left: -63px; display: none;">
</div>

我不认为问题是在loadNextImage，但它被称为的方式。注意loadNextImage有一个参数，该参数定义了顺序是否应该是随机的。

在你的小提琴呼叫loadNextImage是这样做的:

loadNextImage(false);

这意味着随机行为被绕过。尝试简单地反转布尔值:

loadNextImage(true);

还有，这一行似乎有一个错误:

var imgData = imagePool.splice(randomIndex,1);

splice返回被删除结果的数组，因为可以有多个。在本例中，它返回一个数组，其中包含单个项，即图像数据移位。要修复此引用，您需要获取该数组的第一个元素:

var imgData = imagePool.splice(randomIndex,1)[0];
相关文章：