如何在 HTML 的同一页面上制作多个幻灯片？答案

【问题标题】：How do I make multiple slideshows on same page in HTML?如何在 HTML 的同一页面上制作多个幻灯片？
【发布时间】：2022-01-14 11:34:45
【问题描述】：

我正在尝试在一个页面上显示两个图像的多个幻灯片；这两个图像对于所有行都是不同的。我已经尝试在 StackOverflow 上遵循多种解决方案，例如 this，它几乎可以正常工作，但显示有点奇怪，幻灯片中的第二张图片在第一张图片之前显示在第一张图片下方片刻。我附上了一个相同的 GIF 文件：

这是我的代码：

<!doctype html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- <link rel="stylesheet" href="./style.css"> -->
    <!-- icons -->
    <script src="https://kit.fontawesome.com/a7e5305de0.js" crossorigin="anonymous"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans&display=swap" rel="stylesheet">  
    <!-- JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

    <title>Autoencoder Results</title>
    <style>
        #slideshow { 
      margin: 0px auto; 
      position: relative; 
      width: 256px; 
      height: 256px;  
       
    }
    
    #slideshow > div { 
      position: absolute; 
      top: 0px; 
      left: 0px; 
      right: 0px; 
      bottom: 0px; 
    }
    </style>
</head>



<body>
    <center><h1>Autoencoder Results</h1></center>
    
    <h2 style="margin-left: 1.5%;">Reconstructed Training Images</h2>

        {% for i in range(len(training_images_list)) %}
            <br>
            <br>
            <h3 style="margin-left: 10%;">{{ i+1 }}.</h3>
            <center><table border="1">
            <COLGROUP>
            <COL width="100"><COL width="100">
            <THEAD>
            <tr>
            <td><center><b>Input<b></center><a href={{  training_images_list[i] }} title="Input" class="thickbox"><img src={{  training_images_list[i] }} alt="Sorry, No Display!" border="0"/></a></td>
            <td><center><b>Reconstructed<b></center><a href={{  reconstructed_training_images_list[i] }} title="Reconstructed" class="thickbox"><img src={{  reconstructed_training_images_list[i] }} alt="Sorry, No Display!" border="0"/></a></td>
            <td><center><b>Flip-Test<b></center><div class="slideshow"><div>
                <img src={{  training_images_list[i] }}>
              </div>
              <div>
                <img src={{  reconstructed_training_images_list[i] }}>
              </div>
            </div></td>
            </tr>
            </table></center>
        {% endfor %}   

    <script>
        $.each($(".slideshow > div:not(:first-child)"), function() {
  $(this).hide();
});

setInterval(function() { 
  $.each($(".slideshow"), function() {
    $(this).children().first()
      .fadeOut(200)
      .next()
      .fadeIn(200)
      .end()
      .appendTo(this);
   });
},  1500);
    </script>
    
</body>

我尝试更改持续时间和一些位置属性，但这些都不能纠正这种行为，我到底哪里出错了？

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

我没有完全理解您的问题，但我发现代码中有两个主要错误。

首先，您的 div 具有幻灯片的 Class，但是当您以样式调用它们时，您调用的是 id。要解决这个问题，你可以写而不是：

 <style>
    #slideshow { 
      margin: 0px auto; 
      position: relative; 
      width: 256px; 
      height: 256px;  
       
    }
    
    #slideshow > div { 
      position: absolute; 
      top: 0px; 
      left: 0px; 
      right: 0px; 
      bottom: 0px; 
    }
    </style>

你可以写：

    <style>
    .slideshow { 
      margin: 0px auto; 
      position: relative; 
      width: 256px; 
      height: 256px;  
       
    }
    
    .slideshow > div { 
      position: absolute; 
      top: 0px; 
      left: 0px; 
      right: 0px; 
      bottom: 0px; 
    }
    </style>

我注意到的第二件事是（由于问题的模糊性，我可能错了）您希望图像位于单行上。但是使用 HTML 正文中的 js 模板，您正在为数组中的每个值创建一个表。这是逻辑，我不知道你在寻找什么，但这个提示可能会对你有所帮助。

您可以评论任何进一步的更改。

【讨论】：

非常感谢您的帮助！！您的第一个建议有所帮助，它每次都停止在另一个下方添加图像。它现在正在工作。不过，我会解释我的网页，以便您提出进一步的改进建议。我想为每个输入数组显示一个包含 3 列的表（输入、重构、输入幻灯片和重构）。再次感谢！
感谢您的回复。请问您使用的是哪种模板语法？是树枝吗？
不不，我正在使用带有基本 HTML 的 Flask 来可视化一些模型结果。我不完全确定这是否能回答您的问题，因为我不太熟悉 HTML/JS。请告诉我。
可以肯定的是，您有两个数组，其中包含图像的 src 地址。您希望每个人在表格上占一行，然后在下一列中显示重组后的通讯员。对吗？