Question

很抱歉，但我不是开发人员，我的知识仅限于HTML和CSS。我花了很多时间在网上找到解决方案，而且还在论坛上。

这是在HTML页面中添加图像的示例HTML：

<div><img u="image" src="img/Chrysanthemum.jpg" /></div>

我是手动编写的，但如果我要在幻灯片中插入大量图像，我该如何为所有图像生成html？

是否存在执行此操作的任何脚本？

Answer 1

如果编辑器/ IDE支持Emmet（http://Emmet.io），则可以使用它来帮助处理HTML中的重复行。

否则，您将不得不使用某些服务器脚本，如PHP或nodejs。

快速PHP示例*：

<ul class="slides">
    <?php
       foreach(glob("images/slides/*") as $filename) {
           echo '<li><img src="'.$filename.'" alt=""/></li>';
       }
    ?>
</ul>

*不安全，因为“images / slides / *”可能包含其他文件（不是图像），这些文件可能无法安全循环。

Answer 2

使用客户端脚本的一种方式是这样的（使用jQuery）：

var images = [
    'lorem-ipsum',
    'lorem-ipsum',
    'lorem-ipsum',
    'lorem-ipsum',
    'lorem-ipsum',
    'lorem-ipsum',
    'lorem-ipsum',
    'lorem-ipsum'
];

$.each(images, function( i, image ) {
    $('#your-container').append('<img u="image" id="image-'+i+'" src="img/'+image+'.jpg" />');
});

将 images 数组中的值替换为您的图片名称，最后将 $（'＃your-container'）替换为您的容器选择器。

祝你好运！

我需要在幻灯片中添加大量图像

2 个答案: