仅使用 HTML 和 CSS 的自动图像滑块

2025-05-26

仅使用 HTML 和 CSS 的自动图像滑块

在本文中，您将学习如何仅使用 HTML 和 CSS 创建自动图像滑块。之前，我与您分享了更多类型的手动和自动图像滑块。

我先设计了网页，然后在那里做了一个盒子。这个盒子就是这个滑块的结构，我在其中添加了所需的图片。

✅ 100+ JavaScript 项目

✅观看实时预览👉👉自动图像滑块

我使用了，border of 10px这进一步增强了它的美感。这里使用的图像每秒都会变化。不过，您可以根据需要调整时间。

我在下面的教程中对每一行代码给出了完整的逐步解释。

步骤 1：设计网页

我使用以下少量 CSS 代码设计了该网页。这里我只更改了网页的背景颜色。

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    background-color: #7aacff;
}
Enter fullscreen mode Exit fullscreen mode

设计网页

步骤 2：创建滑块的基本结构

现在，我使用 HTML 和 CSS 代码在该页面上创建了一个框。我将把所有图片存储在这个框中。我设置了 85vh 的宽度。框的周围使用了 10 px 的边框，进一步增强了它的美观度。

最后，我使用了 box-shadow。如果你看过演示，你就会明白这个滑块周围有一个黑色阴影。我用 box-shadow 做了这个效果。

 <div class="container">

 </div>
Enter fullscreen mode Exit fullscreen mode 
.container{
    width: 85vmin;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    overflow: hidden;
    border: 10px solid #ffffff;
    border-radius: 8px;
    box-shadow: 10px 25px 30px rgba(0,0,0,0.3);
}
Enter fullscreen mode Exit fullscreen mode

创建滑块的基本结构

步骤 3：将图像添加到自动图像滑块

我使用以下代码在图片滑块中添加了所需的图片。这里我只使用了四张图片。如果您需要，可以使用更多图片。

 <div class="wrapper">
   <img src="https://i.pinimg.com/originals/2b/de/de/2bdede0647e3cdf75b44ea33723201d9.jpg">
   <img src="https://images6.alphacoders.com/462/thumb-1920-462371.jpg">
   <img src="https://images5.alphacoders.com/343/thumb-1920-343645.jpg">
   <img src="https://cdn.wallpapersafari.com/24/98/dwMtqD.jpg">
 </div>
Enter fullscreen mode Exit fullscreen mode

我使用下面的 CSS 代码将这些图片整齐地放置在滑块中。这里我添加了动画。我使用了动画，animation for 16 seconds这意味着切换这四张图片总共需要 16 秒。

这意味着每幅图像将每 4 秒持续变化一次。您可以更改该值，使其变化得更快或更慢。

.wrapper{
    width: 100%;
    display: flex;
    animation: slide 16s infinite;
}

img{
    width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

将图像添加到自动图像滑块

步骤 4：使用 CSS 启用自动播放

上面我们使用 html css创建了完整的图像滑块。现在我添加了自动播放功能，这意味着我使用了以下 CSS 代码来自动更改图像。

我使用 更改了图像@keyframes。我使用 transform 沿 x 轴更改了每幅图像。我已经确定了滑块总宽度的 100%，这将花费 16 秒。

由于我这里使用了四张图片，所以我将总距离（100%）除以了四。因此，从 0% 到 25% 需要 4 秒。从 25% 到 50% 也需要 4 秒。

因此，从 0 到 25，我将 transformX 的值设置为 0。这意味着不会有任何变化，我们将看到第一幅图像。然后从 25 到 50，我使用了 transformX 的值 -100%，这意味着我将先改变图像，然后看到第二幅图像。因为每幅图像的长度都是 100%。

同样，从 50 到 75，我使用了 -200%，这意味着离开第二张图片后，我会看到第三张图片。同样，value -300%从 75 到 100，我使用了 transformX，这意味着我们将看到第四张图片而不是第三张图片。我设置了 16 秒的时间来更改整个自动图像滑块。

@keyframes slide{
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(0);
    }
    30%{
        transform: translateX(-100%);
    }
    50%{
        transform: translateX(-100%);
    }
    55%{
        transform: translateX(-200%);
    }
    75%{
        transform: translateX(-200%);
    }
    80%{
        transform: translateX(-300%);
    }
    100%{
        transform: translateX(-300%);
    }
}
Enter fullscreen mode Exit fullscreen mode

使用 CSS 启用自动播放

相关文章：

  1. 响应式页脚 HTML CSS
  2. 海得拉巴的国际学校
  3. 使用 JavaScript 的简单秒表
  4. JavaScript 密码生成器
  5. 海得拉巴的IB学校
  6. 使用 HTML CSS 的侧边栏菜单

希望您通过本教程了解我如何用 HTML CSS代码创建自动图像滑块。如果您想使用此图像滑块进行导航，可以观看我制作的另一个教程。😊

您可以访问我的博客获取更多类似的教程。https
://www.foolishdeveloper.com/

文章来源：https://dev.to/shantanu_jana/automatic-image-slideshow-in-html-css-26jl
Devto 翻译
PREV
使用 JavaScript 创建一个简单的秒表
NEXT
使用 HTML 和 CSS 制作动画技能栏