如何借助 CSS 创建轮播?

cssweb developmentfront end technology更新于 2025/1/18 20:28:17

轮播在互联网上广为人知。网页轮播 是一种优雅的方式，可以将相似的内容组织到一个触手可及的地方，同时节省宝贵的网站空间。它们用于展示照片、推销产品并吸引新访客的兴趣。但它们的效果如何?有很多反对轮播的论点，也有关于使用轮播来提升性能的研究。那么轮播如何影响网页可用性呢?

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

什么是轮播?

轮播是一种幻灯片形式，可以显示一系列旋转的横幅/图片。轮播通常出现在网站首页上。它可以提升网站的外观。网页轮播，也称为滑块、图库和幻灯片，允许您在一个动态的"滑动"块中显示文本、图形、图片甚至视频。它们是分组内容和概念的绝佳设计选择，可让您在特定内容之间建立视觉联系。

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

许多设计师批评它们拖慢了加载时间并扰乱了设计流程。然而，与任何设计相关的内容一样，如果操作正确，网页轮播可以以一种更易于遍历的方式划分内容。

如何制作网页轮播?

在这里，我们将了解如何在不使用 Bootstrap 等框架的情况下制作一个简单的网页轮播。

步骤如下

使用 HTML 创建轮播的基本结构，其中包含图片。在下面的示例中，我们为轮播添加了 4 张图片。此外，还有 4 个按钮，点击后会显示相应的图片。
首先，创建一个 div 元素作为容器，其中包含 title 和 content。
现在，content div 包含两部分 - 轮播内容(包含在整个过渡过程中保持固定的书写部分)和 幻灯片(包含移动部分，即 4 张图片和按钮)。
使用 CSS 为轮播图片和按钮设置样式。保持幻灯片的相对位置。
使用 CSS 动画使轮播中的图片平滑过渡。

示例

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

<!DOCTYPE html>
<html>
<head>
   <title> Web Carousel </title>
   <style>
      * {
         box-sizing: border-box;
         margin: 10px;
         padding: 3px;
      }
      body {
         background-color: rgb(195, 225, 235);
      }
      .box {
         width: 600px;
         height: 400px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         margin: auto;
      }
      .title {
         padding: 10px 0 10px 0;
         position: absolute;
         top: 10px;
      }
      .content {
         position: relative;
         top: 10%;
      }
      .carousel-content {
         position: absolute;
         top: 50%;
         left: 45%;
         transform: translate(-40%, -40%);
         text-align: center;
         z-index: 50;
      }
      .carousel-title {
         font-size: 48px;
         color: black;
         margin-bottom: 1rem;
         font-family: Times New Roman;
      }
      .slideshow {
         position: relative;
         height: 100%;
         overflow: hidden;
      }
      .wrapper {
         display: flex;
         width: 400%;
         height: 100%;
         top: 10%;
         border-radius: 30%;
         position: relative;
         animation: motion 20s infinite;
      }
      .slide {
         width: 80%;
         height: 200%;
         border-radius: 30%;
      }
      .img {
         width: 100%;
         height: 100%;
         object-fit: cover;
      }
      @keyframes motion {
         0% {left: 0;}
         10% {left: 0;}
         15% {left: -100%;}
         25% {left: -100%;}
         30% {left: -200%;}
         40% {left: -200%;}
         45% {left: -300%;}
         55% {left: -300%;}
         60% {left: -200%;}
         70% {left: -200%;}
         75% {left: -100%;}
         85% {left: -100%;}
         90% {left: 0%;}
      }
      .button {
         position: absolute;
         bottom: 3%;
         left: 50%;
         width: 1.3rem;
         height: 1.3rem;
         background-color: red;
         border-radius: 50%;
         border: 0.2rem solid #d38800;
         outline: none;
         cursor: pointer;
         transform: translateX(-50%);
         z-index: 70;
      }
      .button-1 {
         left: 20%;
      }
      .button-2 {
         left: 25%;
      }
      .button-3 {
         left: 30%;
      }
      .button-4 {
         left: 35%;
      }
      .button-1:focus~.wrapper {
         animation: none;
         left: 0%;
      }
      .button-2:focus~.wrapper {
         animation: none;
         left: -100%;
      }
      .button-3:focus~.wrapper {
         animation: none;
         left: -200%;
      }
      .button-4:focus~.wrapper {
         animation: none;
         left: -300%;
      }
      .button:focus {
         background-color: black;
      }
   </style>
</head>
<body>
   <div class= "box">
      <h1 class= "title"> Responsive Carousel using CSS </h1>
      <div class= "content">
         <div class= "carousel-content">
         </div>
         <div class= "slideshow">
            <button class= "button button-1"> </button>
            <button class= "button button-2"> </button>
            <button class= "button button-3"> </button>
            <button class= "button button-4"> </button>
            <div class= "wrapper">
               <div class= "slide">
                  <img class= "img" src= "https://www.cainiaomax.com/static/images/simply-easy-learning.jpg">
               </div>
               <div class= "slide">
                  <img class= "img" src="https://wallpapercave.com/wp/wp2782600.jpg">
               </div>
               <div class= "slide">
                  <img class= "img" src="https://i.insider.com/5fd90e7ef773c90019ff1293?width=700">
               </div>
               <div class= "slide">
                  <img class= "img" src="https://wallpaperaccess.com/full/1164582.jpg">
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
</html>

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规则。
Animation-duration – 设置动画的持续时间
Animation-timing-function – 指示动画的速度曲线，即动画从一组CSS自定义属性更改为另一组CSS自定义属性所使用的时间间隔。
Animation-delay – 使起始值延迟给定的时间间隔

@keyframes用于精确指定在给定的持续时间内动画中需要执行的代码。这是通过声明动画期间某些特定"帧"的 CSS 属性来实现的，百分比从 0%(动画开始)到 100%(动画结束)。