Javascript 如何逐步更新表中的图像
我试图创建一个网页，它是一个表，一行有两个单元格 单元格应显示一幅逐渐淡入另一幅图像的图像（每个单元格三幅图像中的一幅） 虽然这适用于一个单元格，但两个单元格的图像都显示在彼此的顶部 这是从Javascript 如何逐步更新表中的图像,javascript,html,Javascript,Html,我试图创建一个网页，它是一个表，一行有两个单元格 单元格应显示一幅逐渐淡入另一幅图像的图像（每个单元格三幅图像中的一幅） 虽然这适用于一个单元格，但两个单元格的图像都显示在彼此的顶部 这是从 B 正文{ 文本对齐：居中； } .中心{ 左边距：自动； 右边距：自动； } 表{边框折叠：单独；边框间距：10px 20px；} 桌子 表td；} startImageTransition1（）； startImageTransition2（）； 函数startImageTransition1（
B
正文{
文本对齐：居中；
}
.中心{
左边距：自动；
右边距：自动；
}
表{边框折叠：单独；边框间距：10px 20px；}
桌子
表td；}
startImageTransition1（）；
startImageTransition2（）；
函数startImageTransition1（）{
var images=document.getElementsByClassName（“测试”）；
对于（var i=0；i@关键帧旋转{
0% {
不透明度：0；
}
33.33% {
不透明度：1；
}
66.66% {
不透明度：0；
}
100% {
不透明度：0；
}
}
运输署{
位置：相对位置；
--间隔：5s；/*将其设置为您希望的淡入时间*/
}
法德努特{
位置：绝对位置；
排名：0；
左：0；
动画名称：rotateimgs；
动画持续时间：计算（var（--间隔）*3）；
动画迭代次数：无限；
不透明度：0；
}
第N名儿童（1）{
动画延迟：0s；
位置：相对；/*如果您的图像大小不同，请将其放在最高的位置*/
}
第N名儿童（2名）{
动画延迟：var（--间隔）；
}
第N名儿童（3名）{
动画延迟：计算（var（--间隔）*2）；
}
class=“fadeinout”
你能在这里发布你的HTML、CSS和Javascript吗？或者在这里？这些代码有用吗？我明天会的。谢谢。你考虑过使用CSS动画而不是JS/setInterval解决方案吗？这很有效！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！非常感谢。非常！！！！！但是：代码在CSS中为img添加了一种样式。这种样式适用于屏幕上的所有图像那个页面。所以页面上的另一个图像现在是不可见的。有没有办法保护（或免疫）一个图像不受这种样式的影响？如果我创建一个像这样的表{边框间距10px 20px}但是在同一页上，我只想要一个普通的表，我该怎么做呢？对不起，是的，我很懒。使用类而不是img标记。所以，请原谅我的无知：这会起作用吗（它不知道但不确定为什么）：.rotating{position:absolute；top:0；left:0；动画名称：rotateimgs；动画持续时间：calc（var（--interval）*3）；动画迭代计数：无限；不透明度：0；}img.旋转：第n个子（1）{动画延迟：0s；位置：相对；}img.旋转：第n个子（2）{动画延迟：var（--interval）；}img.旋转：第n个子（3）{动画延迟：计算（var（--interval）*2）；}但这不起作用，我想我想应用。旋转到旋转的图像，而不是不旋转的图像。但是，我该如何处理第n个子问题呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> b
<style>
body {
text-align: center;
}
.center {
margin-left: auto;
margin-right: auto;
}
table {border-collapse: separate; border-spacing: 10px 20px;}
table,
table td;}
</style>
</head>
<body>
<table class="center" style="max-width:100%">
<tr><td>
<div id="1">
<img src= "image1.jpg"
class="test2" />
<img src="image2.jpg"
class="test2" />
<img src="image3.jpg"
class="test2" />
</div>
</td></tr>
<tr><td>
<div id="2">
<img src= "image4.jpg"
class="test" />
<img src="image5.jpg"
class="test" />
<img src="image6.jpg"
class="test" />
</div>
</td></tr></table>
<script>
startImageTransition1();
startImageTransition2();
function startImageTransition1() {
var images = document.getElementsByClassName("test");
for (var i = 0; i < images.length; ++i) {
images[i].style.opacity = 1;
}
var top = 1;
var cur = images.length - 1;
setInterval(changeImage, 3000);
async function changeImage() {
var nextImage = (1 + cur) % images.length;
images[cur].style.zIndex = top + 1;
images[nextImage].style.zIndex = top;
await transition();
images[cur].style.zIndex = top;
images[nextImage].style.zIndex = top + 1;
top = top + 1;
images[cur].style.opacity = 1;
cur = nextImage;
}
function transition() {
return new Promise(function(resolve, reject) {
var del = 0.01;
var id = setInterval(changeOpacity, 10);
function changeOpacity() {
images[cur].style.opacity -= del;
if (images[cur].style.opacity <= 0) {
clearInterval(id);
resolve();
}
}
})
}
}
function startImageTransition2() {
var images = document.getElementsByClassName("test2");
for (var i = 0; i < images.length; ++i) {
images[i].style.opacity = 1;
}
var top = 1;
var cur = images.length - 1;
setInterval(changeImage, 3000);
async function changeImage() {
var nextImage = (1 + cur) % images.length;
images[cur].style.zIndex = top + 1;
images[nextImage].style.zIndex = top;
await transition();
images[cur].style.zIndex = top;
images[nextImage].style.zIndex = top + 1;
top = top + 1;
images[cur].style.opacity = 1;
cur = nextImage;
}
function transition() {
return new Promise(function(resolve, reject) {
var del = 0.01;
var id = setInterval(changeOpacity, 10);
function changeOpacity() {
images[cur].style.opacity -= del;
if (images[cur].style.opacity <= 0) {
clearInterval(id);
resolve();
}
}
})
}
}
</script>