我正在嘗試在一個頁面上顯示兩個影像的多個幻燈片；這兩個影像對于所有行都是不同的。我已經嘗試在 StackOverflow 上遵循多種解決方案，就像
這是我的代碼：
<!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>
我已經嘗試更改持續時間和一些位置屬性，但是這些都不能糾正這種行為，我到底哪里出錯了？
uj5u.com熱心網友回復：
我沒有完全解決您的問題，但我在代碼中看到了兩個主要錯誤。
- 首先，您的 div 具有幻燈片類，但是當您以樣式呼叫它們時，您呼叫的是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 模板，您正在為陣列中的每個值創建一個表。這是邏輯，我不知道你在尋找什么，但這個提示可能會對你有所幫助。
您可以評論任何進一步的更改。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/410835.html
標籤：