Question

我正在制作一堆堆叠的div，当moused-over显示图像时会扩展，但我有很多图像。
有没有一种方法在CSS或JS（我真的不知道任何关于JS）让每个div自动使用文件夹中的下一个图像？例如：图像命名为 map1.jpg ， map2.jpg ... map91.jpg 。并能够使用相同的background-image:url，但有一些东西告诉它为每个新div添加1到下一个图像，所以我不必手动指定90多个不同的图像。

我希望我能够解释得那么好。谢谢=）

Answer 1

在CSS中这是不可能的，因为你无法连接背景图像的url路径。

在javascript中这很简单，使用jQuery你可以简单地加载身体准备好时所需的所有div：

// on page load
$(document).ready(function(){

    // 10 images to div #image-board
    for(var i=0; i<10; i++){

        // create a div with image #i
        $('#image-board').append('<div><img src="my/collection/folder/Image'+i+'.jpg"></div>');
    }
});

不要忘记在HTML页面中创建一个<div id="image-board"></div>，其中所有图片都将列在

中

Answer 2

我会尝试包含很多细节，因为你说你不熟悉JavaScript。当你说叠加的div时，我认为你的意思是一个在另一个里面。从你的html <div id="div0" style="background-image:url('map0.jpg')"></div>中的一个具有适当id和背景的div开始这里是使用jQuery（一个非常常见的javascript库，你可以包含脚本标记）的一些Javascript，它将在你的第一个div中添加一个新的div与更新的url名。

    for (var i = 0; i < number_of_images - 1; i++) {
        var oldId = '#div' + i;
        var newId = 'div' + (i + 1);
        var newUrl = 'map'+(i+1)+'.jpg';
        var newdiv = '<div id="' + newId + '" style="background-image:url('+newUrl+')></div>';
        $(oldId).append(newdiv);
    }

for循环将遍历每个图像，然后在一系列连接中创建一个字符串，成为更新的div。 '$'用该id搜索DOM元素，然后在其中添加新的div。如果通过堆叠表示您下方的新div但未包含在前一个div中，请使用.insertAfter代替.append。假设您的网页可以覆盖所有图片，这应该可行。另请注意我已将此索引（Javascript中的标准）编入索引，但您的问题将map1称为第一个地图。如果您已经为这些映射命名，则可能需要将for循环重新索引为1。

为下一个div自动将image-url更改为1？

2 个答案: