文章/答案/技术大牛

发布

纯css轮播代码

纯CSS轮播是一种使用CSS动画和关键帧来创建滑动效果的简单方法。它不需要JavaScript或其他脚本语言，因此加载速度快，对性能的影响较小。下面是一个基本的纯CSS轮播代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Carousel</title>
<style>
  .carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  .carousel-item {
    min-width: 100%;
    box-sizing: border-box;
  }
  .carousel-item img {
    width: 100%;
    display: block;
  }
  @keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
  .carousel-inner.active {
    animation: slide 5s infinite;
  }
</style>
</head>
<body>

<div class="carousel">
  <div class="carousel-inner active">
    <div class="carousel-item"><img src="image1.jpg" alt="Image 1"></div>
    <div class="carousel-item"><img src="image2.jpg" alt="Image 2"></div>
    <div class="carousel-item"><img src="image3.jpg" alt="Image 3"></div>
  </div>
</div>

<script>
  // JavaScript to switch between slides
  let currentIndex = 0;
  const items = document.querySelectorAll('.carousel-item');
  const totalItems = items.length;

  setInterval(() => {
    currentIndex++;
    if (currentIndex >= totalItems) {
      currentIndex = 0;
      document.querySelector('.carousel-inner').style.animation = 'none';
      setTimeout(() => {
        document.querySelector('.carousel-inner').style.transform = `translateX(0)`;
        document.querySelector('.carousel-inner').classList.remove('active');
        document.querySelector('.carousel-inner').classList.add('active');
        document.querySelector('.carousel-inner').style.animation = 'slide 5s infinite';
      }, 50);
    }
    document.querySelector('.carousel-inner').style.transform = `translateX(-${currentIndex * 100}%)`;
  }, 5000);
</script>

</body>
</html>

在这个示例中，.carousel 是轮播容器，.carousel-inner 是包含所有轮播项的容器，.carousel-item 是单个轮播项。CSS动画 @keyframes slide 定义了滑动效果，而 .carousel-inner.active 类应用了这个动画。

优势：

纯CSS实现，无需JavaScript，加载速度快。
对于简单的轮播效果，代码简洁易懂。
性能较好，因为CSS动画通常由浏览器优化。

类型：

基于关键帧动画的轮播。
可以通过改变关键帧来定制不同的滑动效果。

应用场景：

简单的图片展示。
静态网站或博客中的图片轮播。
移动设备上的轻量级轮播。

遇到的问题及解决方法：

动画不流畅：确保使用 will-change 属性或 -webkit-transform: translateZ(0) 来提示浏览器提前优化动画元素。
动画结束后无法重置：可以通过JavaScript在动画结束后重置元素的样式，如上面的示例代码所示。
无法响应式适配：使用 min-width: 100% 和 flex 布局来确保轮播在不同屏幕尺寸下都能正确显示。

请注意，虽然这个示例使用了JavaScript来切换轮播项，但核心的滑动效果仍然是由CSS实现的。如果你需要一个完全不依赖JavaScript的纯CSS轮播，那么你需要手动创建多个轮播项，并使用伪类（如:nth-child）来控制它们的显示和隐藏。

页面内容是否对你有帮助？

有帮助

没帮助

使用纯CSS创建轮播

javascript、html、css、angularjs、carousel

我正在尝试创建一个简单的CSS旋转木马，可以容纳5个项目在当前视图中，并显示在滑块点击休息。这是我用灰色背景创建的水果列表。

浏览 0提问于2018-09-17得票数 0

1回答

无限自动播放纯css轮播

javascript、css、sass

我正在寻找一个纯css无限循环移动div。我已经找到了这个codepen，这是我主要在寻找的，但我找不到正确的设置，使它动画一次一个标志。height="100" width="250" alt="" /> </div> </div> css

浏览 18提问于2019-04-17得票数 0

1回答

如何使幻灯片在纯react旋转木马中居中

pure-react-carousel

有没有一个属性我可以在pure-react-carousel中设置，使幻灯片显示为“居中”。我试着为这个找到一个选项，但是没有。

浏览 7提问于2020-03-06得票数 0

6回答

强制在加载包括JS文件在内的任何内容之前加载某些JS文件和图像

javascript、image、load

因为我的客户的页面有大量的Javascript，所以我为手机版添加的图像轮播在智能手机上的渲染耗时很长。我想加载轮播图像，然后轮播所需的文件(jQuery，carousel JS文件，carousell CSS文件)之前，任何其他包括JS，CSS等。这是可能的吗?如果是的话，该怎么做？

浏览 0提问于2014-02-11得票数 2

3回答

OWL Carousel 2宽度不正确，显示所有项目

javascript、css、owl-carousel

我有以下OWL Carousel 2初始化代码： moment.locale('nl-NL');navRewind: true, }); 这将产生轮播的以下

浏览 8提问于2015-12-02得票数 0

1回答

根据表列的内容调整表列的高度

jquery、html、css、iframe

每个iframe具有不同的内容，因此高度也不同最初发生的是内容轮播在每个iframe之间自动切换的动画。然后，用户可以使用轮播导航在iframe之间切换。iframe><iframe></iframe></div>下面是我用来改变每个

浏览 4提问于2015-05-30得票数 1

2回答

在style=slides时禁用amp-carousel中的控件

html、carousel、amp-html

我想隐藏“上一个”和“下一个”控件，当amp-carousel的类型是“幻灯片”时，它们会显示出来。我还没有找到任何关于如何定制"controls“属性的文档。

浏览 1提问于2016-02-11得票数 5

1回答

具有多个项目的引导转盘和同一页面上的默认转盘

html、css、twitter-bootstrap

我在页面上的特定轮播中应用CSS时遇到了问题。我所指的例子可以在下面的链接中看到。

浏览 3提问于2015-05-27得票数 4

1回答

Twitter Bootstrap carousel不工作，但以前工作过

jquery、twitter-bootstrap、carousel

我复制并粘贴了我在这个网站上使用的相同代码到我的新网站中，代码是这样的： <!

浏览 0提问于2013-11-19得票数 0

1回答

引导旋转木马作为带有静态文本的整页滑块

jquery、css、twitter-bootstrap、slider

-- Latest compiled and minified CSS --> <div class="row"&

浏览 0提问于2017-12-14得票数 0

1回答

当‘PageWrap’(容器)宽度: 1140px时，引导4轮转盘全屏

html、css、bootstrap-4

使用来自Bootstrap 4的轮播组件，但是轮播没有包裹整个窗口屏幕。import React from 'react';import 'bootstrap/dist/css/bootstrap.min.<e

浏览 29提问于2021-03-12得票数 0

1回答

因为我的网站在一个页面上有两个不同的引导转盘。每一个都应该有自己的转换speed.After经过很长一段时间的尝试，我找到了一个通过javascript解决问题的方法 document.getElementById("image1").style.cssText="position: relative;-webkit-transition: 5s ease-in-out left;-moz-transition: 5s ease-in-out left;-o-transition: 5s ease-in-out left;transition: 5s ease-in-o

浏览 0提问于2013-03-14得票数 3

1回答

仅使用HTML和CSS构建Carousel

html、css

我想建立一个基于纯CSS和HTML的响应式旋转木马。我正在尝试将其建模为as per this template，但不希望它使用任何Javascript或JQuery。这是我到目前为止所知道的： CodePen 我想让轮播旋转幻灯片时，点击上一个和下一个按钮，也自动旋转幻灯片每5秒。

浏览 30提问于2020-06-17得票数 0

1回答

如何修复php输出

html、css

我正在用php在引导图像轮播中显示图像。如何重构代码以在图像下显示'banner_title‘？“banner_title”当前显示在图像上方。我尝试过像这样使用css <code>A1</code>

浏览 12提问于2019-04-01得票数 7

2回答

在多个页面中管理相同的引导转盘

twitter-bootstrap、twitter-bootstrap-3

因此，如果我将第一个轮播的css用于所有轮播，所有的修改都会影响到所有的轮播。所以我不能正确地管理它们。在不同规模的项目中管理多个旋转木马的最佳方式是什么？感谢您的支持。

浏览 3提问于2015-11-01得票数 0

1回答

旋转木马图像不会淡出

jquery、html、css、twitter-bootstrap

CSS： position: absolute; .carousel-fade .carousel-inner .item {opacity

浏览 1提问于2015-05-22得票数 1

2回答

为特定轮播设置css代码样式

css、carousel

我有两个carousel，但是我只想让第二个carousel获得style标签中的css代码。第一个carousel不应该获得标签样式。我不能将css代码隔离为只影响第二个转盘。有人能帮帮我吗？text/javascript" src="bootstrap-3.0.2/js/bootstrap.js"></script> <link rel="stylesheet" type="text&#x

浏览 1提问于2015-03-10得票数 0

2回答