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

Question

我正在尝试在一个页面上显示两个图像的多个幻灯片； 这两个图像对于所有行都是不同的。 我已经尝试在 StackOverflow 上遵循多种解决方案，就像这样，它几乎可以正常工作，但显示有点奇怪，幻灯片中的第二张图片在第一张图片之前显示在第一张图片下方片刻。 我附上了一个相同的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>

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

Answer 1

我没有完全解决您的问题，但我在代码中看到了两个主要错误。

首先，您的 div 带有幻灯片的Class ，但是当您在 styles 中调用它们时，您调用的是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 模板，您正在为数组中的每个值创建一个表。 这是逻辑，我不知道你在寻找什么，但这个提示可能会对你有所帮助。

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

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-01-14 12:11:55

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-01-14 12:11:55

解决方案1
1 已采纳 2022-01-14 12:11:55