Question

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

的jsfiddle：

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

Answer 1

我不认为问题出在loadNextImage中，而是它的调用方式。注意loadNextImage有一个参数，用于定义订单是否应该是随机的。

在你的小提琴中，对loadNextImage的调用是这样完成的：

loadNextImage(false);

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

loadNextImage(true);

此外，此行似乎有错误：

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

splice返回删除结果的数组，因为可以有多个结果。在这种情况下，它返回一个带有单个项目的数组，图像数据被移动。要修复此引用，您需要获取此数组的第一个元素：

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

通过这些更改，幻灯片可以正常运行。

随机顺序的Javascript幻灯片

1 个答案: