javascript - 使用嵌入手机中的图像创建幻灯片，就好像它们是屏幕截图一样

Question

我正在尝试创建图像幻灯片。这些图像将是安卓手机的屏幕截图，然后我想要一张手机的实际图片来循环浏览这些图像，就好像它们是手机上显示的一样。

所以这将是一个带有应用程序图像的手机幻灯片。

对此的任何帮助都会很棒。我可以创建一个简单的幻灯片，其中每 2 秒更改三张图像，但我只希望这些图像位于手机图像之上。

这是我到目前为止所拥有的：

Answer 1

Yu 需要一张屏幕部分被剪掉的手机图像。将手机另存为 PNG 文件，以便屏幕切口部分变得透明。然后您需要将 PNG 放入 HTML 文档中。并给 PNG 一个具有样式属性的类

position: absolute;
width: xxx px;
height:xxx px;
top:xxx px;
left:xxx px;
z-index: 2;

显然，将上面的 xxx 值调整为您在屏幕上的资产和位置。基本上，部分透明的 PNG 将位于具有正确 z 索引的幻灯片上。根据需要增加 z 索引。