使用图像来改善网页的整体外观是一种常见的做法。许多网站使用图像幻灯片来显示网页中显示的内容的相关图像。在W3Schools网站上可以找到相同的示例实现。

在这个博客中，我们将讨论如何使用类似的功能来提高仪表板的审美吸引力。我们讨论两种方法，一种是使用标准SAP Lumira Designer组件，另一种是使用CSS动画效果。

使用SAP Lumira Designer标准组件：

创建SAP Lumira Designer应用程序并创建如下所示的结构添加一个Pagebook组件，并在每个需要依次显示的页面中包含相关图像。将所有图像的不透明度（%）设置为100，大数据是什么意思，并将"显示模式"设置为"拉伸"将Pagebook组件的pagepre-Loading属性设置为All Pages，以便在仪表板打开时预加载图像，幻灯片动画从一开始就清晰可见添加一个定时器控件，我们将使用它在预定义的时间间隔后一个接一个地滑动图像为Timer控件的On Timer事件添加以下脚本，这将更改每次触发On Timer事件时显示的页面应用程序.log（"启动计时器"）；如果（PB_砂锅菜.getSelectedPageIndex() == 0){铅_CASSEROLE.setSelectedPageIndex设置页面索引(1);}否则如果（PB_砂锅菜.getSelectedPageIndex() == 1){铅_CASSEROLE.setSelectedPageIndex设置页面索引(2);}否则如果（PB_砂锅菜.getSelectedPageIndex() == 2){铅_CASSEROLE.setSelectedPageIndex设置页面索引(3);}否则如果（PB_砂锅菜.getSelectedPageIndex() == 3){铅_CASSEROLE.setSelectedPageIndex设置页面索引(0);}​为应用程序的启动事件添加blow脚本定时器启动();​现在，当您运行应用程序时，页面会在计时器控件中指定的时间间隔之后滑动这是使用平台中的标准组件实现幻灯片放映效果的一种非常简单的方法这样做的缺点是，每次需要更改映像时，好评返现，服务器上都会发生回发调用。虽然这不会增加太多处理，但会导致客户端和服务器之间不必要的通信量，如下所示

使用标准CSS动画

为了避免每次图像更改时产生的网络通信量，我们使用CSS动画来实现类似的功能创建另一个SAP Lumira Designer应用程序并创建如下所示的结构现在用下面的内容创建一个CSS文件，并将其附加到应用程序自定义CSS属性#锅盘1{溢出：隐藏！重要的；边距：自动！重要的；}.slideshow容器{过渡：1s；溢出：可见！重要的；}.幻灯片{动画：幻灯片24秒轻松无限；}@关键帧滑动{0% {变换：translateY（0px）；}15% {变换：translateY（0px）；}30% {变换：translateY（300px）；}45% {变换：translateY（300px）；}60% {变换：translateY（600px）；}75% {变换：translateY（600px）；}90% {转换：translateY（900px）；}99% {转换：translateY（900px）；}100% {变换：translateY（0）；}}​将slideshow container slide作为CSS类分配给Panel PNL\u CASSROLE\u容器设置图像属性如下图像上边距高度图10300图像2-300300图3-600300图4-900300基本上，我们是安排在面板上的图像一个接一个地显示每个图像的部分使用变换效果最后，记下使用Panel ID标识符为CSS文件中的Panel容器指定的溢出和边距覆盖#锅盘1{溢出：隐藏！重要的；边距：自动！重要的；}​在CSS文件中正确地提到Panel ID是很重要的，如果您使用的是不同的Panel ID，什么叫云，网站自助建站系统，请确保更新它现在启动应用程序，返利商城系统开发，并观看页面在CSS动画属性中指定的时间间隔之后滑动此方法不会生成在上一方法中生成的附加回发调用

CSS方法适用于Chrome、IE 11以及Edge browser。请告诉我您对这些选项的看法，或者如果您在设置此选项时遇到问题。