Javascript 在跟踪过程中，希望在过程完成后对图像进行模糊处理

我正在创建一个网站，其中一个用户正在查看跟踪屏幕。在此屏幕中，用户可以看到软件包的当前状态。第一个过程完成后，已完成的过程就会变得模糊，并且当前状态会发光。下面是我用HTML和CSS编写的代码

li{
列表样式类型：无；
浮动：左；
利润率：10px；
}
.伊姆盖奇{
边缘顶部：150px；
}
体h2{
字体系列：无衬线，“蒙特塞拉特”；
}

进口




载体




敦豪环球速递公司




HMRC

我尽了最大努力去理解你想做什么

我的解释是，你想在加载内容时模糊页面，然后显示加载的页面

我添加了代码来实现这一点，另外我还添加了一个代码来模拟没有加载的照片，因为它们没有包含完整的URI来访问它们

如果这不是你想要的，那么请编辑你的问题，让我知道，这样我就可以更改我的答案

//模拟加载照片
$（窗口）.on（'load'，function（）{
美元（“#封面”）。淡出（200）；
});
函数callLoad（）{
$（window.load（）；
}
setTimeout（callLoad，1000）；
$（函数（）{
$（'.image'）。每个（函数（）{
设randomNumber=（Math.floor（Math.random（）*100）+1）；
$（this.attr（'src'，'https://picsum.photos/id/“+randomNumber+”/202/100’；
});    
var images=$（'.image'）.sort（函数（a，b）{
返回+$（a）.data（'sort'）-+$（b）.data（'sort'）；
});
var指数=0；
var getNextImage=函数（索引）{
var余数=索引%images.length；
返回$（images[（余数===0）？images.length-1：余数-1]）；
};
$（“#btnNext”）。单击（函数（）{
getNextImage（索引-1）.addClass（“模糊内容”）；
getNextImage（index.toggleClass（“模糊内容”）；
索引++；
});
});
li{
列表样式类型：无；
浮动：左；
利润率：10px；
}
.伊姆盖奇{
边缘顶部：50px；
}
体h2{
字体系列：无衬线，“蒙特塞拉特”；
}
#掩护{
排名：0；
左：0；
位置：固定；
身高：100%；
宽度：100%；
背景：#CCC；
z指数：9999；
}
.模糊内容{
-webkit过滤器：url（#svg模糊）；
过滤器：url（#svg模糊）；
}

下一个


某物


进口


载体




敦豪环球速递公司


HMRC


HMRC2


关于此代码，您有什么具体问题吗？仅供参考，您的HTML无效，因为您缺少
中的所有
标记。另外，如果多个
ul
都只包含一个
li
，这似乎有点奇怪，它们不应该在一个
ul
中组合在一起吗？如果您想知道如何使用CSS模糊图像，那么关于堆栈溢出的问题和答案很多。显示99个结果…问题在哪里？单击外部按钮时，应选择下一个“li”元素，选定的“li”应发光，其他元素应模糊。@xProgram什么外部按钮？让我正确地理解，使用一个按钮，你想通过依次模糊除一张图片之外的所有图片，一次浏览一张图片吗？这是正确的吗？@xProgram，我根据您的反馈更新了代码。看一看。