Question

我有四个div，我希望它们显示随机图像。我从SO那里获得了这段代码，并且可以正常工作：

<script type="text/javascript">
        function get_image(div_id){
            var imgCount = 3;
            var dir = 'images/';
            var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
            var images = new Array
                images[1] = "1.jpg",
                images[2] = "2.jpg",
                images[3] = "3.jpg",
            document.getElementById(div_id).style.backgroundImage = "url(" + dir + images[randomCount] + ")";
            console.log("div_id = " + div_id)
        }
    </script>

像这样从div中调用它：

<div class="image_holder" id="left_top">
                <script id="lt_innerscript">
                    var div_id = document.getElementById("lt_innerscript").parentElement.id;
                    var myVar = setInterval(function() { get_image(div_id); }, 800);
                </script>   
            </div>

问题是，只有最后一个显示图像，其他所有都为空白。这可能吗，我在做什么错了？

有一些CSS可以为div设置样式，它们位于2个单独的div中，其ID为“ left”和“ right”。

#left{
    float: left;
    background: blue;
    width: 300px;
    height: 100%;
    color: #005CB9;
}

和

.image_holder {
    position: relative;
    width: 300px;
    height: 256px;
}

Answer 1

对于这种情况下的任何人，我都是这样解决的...

这是SO中的代码，为满足我的需要进行了一些修改（图像编号为1.jpg，2.jpg等）：

function show_images(the_div){
    console.log(the_div)
    var imgCount = 19;
    var dir = 'images/';
    var imagenum = Math.round(Math.random() * (imgCount - 1)) + 1;
    var theimage = imagenum.toString() + ".jpg"
    document.getElementById(the_div.id).style.backgroundImage = "url(" + dir + theimage + ")";

}

因此，我没有在每个div元素中使用脚本来调用它，而是从每个侧面板获取div的：

    function get_divs(){
        var left = document.getElementById("left");
        var right = document.getElementById("right");

        var l_divs = left.getElementsByTagName("div");
        var r_divs = right.getElementsByTagName("div");

        return [l_divs, r_divs]
    }

以下代码调用该代码，该代码采用div，并在循环中生成1到6之间的三个随机数。小于3的数字用于左侧，大于4的数字用于右侧，但是每侧只有3个div，因此，如果数字> 4，则将减去3。

然后使用上面的show_images（）代码设置div图片。

function update_divs(){
    divs = get_divs()
    l_divs = divs[0]
    r_divs = divs[1]

    for(var i=0; i<4; i++){
        rnd = Math.floor((Math.random() * 6));
        if (rnd <= 2){
            show_images(l_divs[rnd])
        }else{
            rnd -= 3;
            show_images(r_divs[rnd])
     }
}

}

然后在页面末尾添加：

<script>    
    setInterval(update_divs, 1600)
</script>

是否可以有多个脚本调用同一脚本？

1 个答案: