页面更改时Javascript图像交叉淡入淡出

我是一名HTML开发新手，虽然我还没有学过Javascript，但我想在我的第一个更大的网页中加入它。 我的布局如下所示，标题、菜单和图像位于顶部

图像将根据所选菜单项进行更改。 我想做的是使图像在彼此之间平滑地淡出，但我在互联网上找到的指南只描述了堆叠在一起的图像，以创建一个画廊

---

如何将每个图像指定为HTML页面？它有效吗？或者我必须彻底更改我的网页，只更改内容而不加载单独的HTML吗？

看看JQuery的动画功能： 事情是这样的：

$("#idOfYourImage").animate({opacity: 1}, 1000, function(){
  //Function to be executed when the animation is done
})

第二个参数1000表示动画的持续时间

为此，您必须将图像css设置为不透明度：0，以便它可以在不透明度0和不透明度1之间设置动画。这称为淡入

---

美元符号代表JQuery，您必须包含该脚本才能使其工作

如果您加载新页面，您无法进行转换，但它会很糟糕。你需要使用AJAX，或者让其他内容已经加载并显示出来，而不是移动到另一个页面。这只是为了图片，还是图片下面会有内容？对于任何类型的动画，我都会推荐它，它可以帮助您在我的网页的基本功能中使用动画，并且只使用HTML，我可能会通过这个概念。谢谢你的回答@Sage在图片下有内容段落和页脚。动画范围内这并不难。在没有单页站点的情况下这样做会限制这种类型的用例。@Diodeus将网页重新编写为一个包含所有内容的HTML文件的单页工作有多困难？