旋转木马在互联网上非常有名。 网络旋转木马是一种优雅的方式，可以将相似的内容组织到一个触觉的地方，同时保留宝贵的网站空间。它们用于展示照片、提供产品，并吸引新访问者的兴趣。但是它们的效果如何？有很多反对旋转木马的论点，以及研究使用旋转木马来提高性能。但是旋转木马如何影响网站的可用性？

在本文中，我们将讨论轮播图的基础知识以及如何使用HTML和CSS创建轮播图。

什么是轮播图？

轮播图是一种幻灯片展示，可以显示一系列旋转的横幅/图片。轮播图通常出现在网站的首页上。它可以改善您的网站的外观。Web轮播图，也被称为滑块、画廊和幻灯片，允许您在一个动态的“滑动”块中显示文本、图形、图像甚至视频。它们是将内容和概念分组的优秀设计选择，可以在特定内容之间建立视觉链接。

Web轮播图因此非常适合在电子商务网站上推广相关产品，在设计作品集中展示特色项目，甚至在房地产网站上循环播放家居内外照片。然而，它们并不总是最佳选择。

立即学习“前端免费学习笔记（深入）”；

许多设计师批评它们会减慢加载时间并破坏设计的流畅性。然而，与任何设计相关的事物一样，当正确地完成时，网页轮播可以以一种更容易遍历的方式分割内容。

如何制作一个网页轮播图？

在这里，我们将看到如何制作一个简单的网页轮播图，而不使用像Bootstrap这样的框架。

需要遵循的步骤

• 使用HTML创建走马灯的基本结构，其中包含图像。在下面的示例中，我们为走马灯添加了4张图像。此外，还有4个按钮，点击按钮将显示相应的图像。

• 首先，创建一个作为容器的 div 元素，其中包括 标题 和 内容。

• 现在，content div 包含两个部分- carousel content（包含在整个过渡过程中保持固定的文字部分）和 slideshow（包含移动部分，即4张图片和按钮）。

• 使用CSS来为轮播图像和按钮添加样式。保持幻灯片的位置为相对定位。

• 使用CSS动画使轮播中的图像平滑过渡。

Example

示例

以下示例演示了一个包含4个图像和控制图像显示的按钮的轮播。这些图像以固定时间间隔进行过渡显示。

BlessAI

Bless AI 提供五个独特的功能：每日问候、庆祝问候、祝福、祷告和名言的文本生成和图片生成。

下载

   
   


   

      
 Responsive Carousel using CSS 
      

         

         
         

             
             
             
             
            

               

                  
               
               

                  
               
               

                  
               
               

                  
               
            
         
      
   

CSS Transform 属性

要修改视觉格式模型所使用的坐标空间，请使用CSS中的transform属性。通过这样做，可以对元素应用倾斜、旋转和平移等效果。

语法

transform: none| transform-functions| initial| inherit;

价值观

• translate(x, y) − 此函数定义了沿X和Y坐标的平移。

• translate3d(x, y, z) − 此函数提供了沿X、Y和Z坐标轴的平移。

• initial − 将元素设置为其默认值。

• inherit − 它继承父元素的值。

CSS动画

CSS的animation属性允许我们在一定的时间间隔内更改元素的各种样式属性，从而给它添加动画效果。

动画的一些特性如下：

• Animation-name - 它允许我们指定动画的名称，后续由@keyframes使用该名称来指定要执行该动画的CSS规则。

• 动画持续时间 - 设置动画的持续时间

• 动画时间函数 - 表示动画的速度曲线，即动画从一组CSS自定义属性变化到另一组所使用的时间间隔。

• Animation-delay – 在给定的时间间隔内为起始值设置延迟

@keyframes用于指定在给定的时间段内动画中需要执行的代码。这是通过在动画期间为某些特定的“帧”声明CSS属性来实现的，百分比从0％（动画的开始）到100％（动画的结束）。