Question

我正在设计一个HTML + CSS滑块，幻灯片和无限持续时间之间自动转换。我有这个滑块在不同的页面上有不同的内容（和div的数量），所以我需要为一切编写相同的代码。

<div class="slide-container">
    <div class="slide">div 1 goes here!</div>
    <div class="slide">div 2 goes here!</div>
    <div class="slide">div 3 goes here!</div>
</div>

我已经开始使用这个CSS代码，尝试使用不同的动画，但我不知道如何做到这一点

.slide-container {   
    -webkit-animation: transition 2s infinite linear;
    -moz-animation: transition 2s infinite linear;
    -o-animation: transition 2s infinite linear;
}

编辑：这是我用来解决问题的最后一次转换：

@-webkit-keyframes animation {
    20%,30% {-webkit-transform: translate(100%);}
    70%,100% {-webkit-transform: translate(-100%);}
}

我想在屏幕上获得一个div为5-10秒，并且div之间的转换为2秒（在括号div中，此时必须在屏幕上，宽度= 100％，高度= 50px）：

（ - start-DIV1 5s） - 2s - ＆gt;（DIV2 5s） - 2s - ＆gt; ...--＆gt;（DIVN 5s） - 2s - ＆gt;（DIV1 5s） - ＆GT; ...

我使用CSS做滑块的原因是因为我试图避免使用JavaScript和JQuery函数。

Answer 1

定义12s的地方是总幻灯片时间。这除以幻灯片的数量（在此演示中为3），在此示例中为我们提供了4s幻灯片。这是一种可以切换幻灯片时间的方法。但就像你提到的另一张海报一样，你仍然需要定制一下。我的方法演示了一种水平滑动方法，具有平滑过渡和快速加载时间。无论如何，纯CSS3就是您的追随者。

JS Poodle

CSS3电源：

＆＃13;

body {
    padding: 1em;
    background: #999
}
.scrollable {
    width: 333px;
    margin: 0 auto;
    padding: 0;
    border:10px solid #fff;
    background: #000;
    position: relative;
    overflow: hidden;
    text-align: center;
}
img {
    max-width: 333px;
    margin: 0;
    float:left;
}
.items {
    width:999px;
    -webkit-animation: hscroll 12s infinite;
    -moz-animation: hscroll 12s infinite;
    -ms-animation: hscroll 12s infinite;
}

@-webkit-keyframes hscroll {
  0%   { margin-left: 0; }
27.33%  { margin-left: 0 }
  33.33%  { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
  100%  { margin-left: 0 }
}

@-moz-keyframes hscroll {
  0%   { margin-left: 0; }
27.33%  { margin-left: 0 }
  33.33%  { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
  100%  { margin-left: 0 }
}

@-ms-keyframes hscroll {
  0%   { margin-left: 0; }
27.33%  { margin-left: 0 }
  33.33%  { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
  100%  { margin-left: 0 }
}

＆＃13;

<div class="scrollable">
    <div class="items">
        <img src="http://placehold.it/333x500/E8117F/FFFFFF&text=Horizontal"/>
        <img src="http://placehold.it/333x500/FFFFFF/E8117F&text=css3"/>
        <img src="http://placehold.it/333x500/3D668F/FFFFFF&text=slide show"/>
    </div>
</div>

＆＃13;

Answer 2

这是一个快速演示，演示了您需要使用的一些技术。我使用了您提供的相同HTML标记。这不是一个随时可用的“复制和粘贴”解决方案 - 您需要花些时间来理解代码并将该概念应用于您的特定用例。

该技术主要涉及并排排列所有滑块，然后每隔几秒移动整行。边缘将被裁剪，以便一次只显示一张幻灯片。

首先，您需要通过对.slide-container元素应用宽度和高度来定义“查看区域”的大小。然后将overflow: hidden应用于容器，以便不显示不在“查看区域”中的幻灯片。

每张幻灯片都应填充“查看区域”，因此对每个.slide元素应用100％的宽度和高度。您还需要将它们显示为inline-block元素，以便它们并排排列，但仍然可以填充其容器。

最后，困难的部分：定义动画。关键帧动画是基于百分比的。基本上，由于有三张幻灯片，我们想要在经过33％的动画后再次切换，再次在66％之后切换，并在100％之后返回到开头。我们想要一个平滑的“幻灯片”，所以我们将实际转换总共持续5％ - 所以第一个实际开始时为28％，结束时为33％。关键帧代码如下所示：

@keyframes slide {
  /* modify percentages to match how many items you have */
  0% { margin-left: 0; } /* initial position */
  /* (stays in first position ) */
  28.333% { margin-left: 0; } /* start sliding */
  33.333% { margin-left: -100%; } /* done sliding */
  /* (stays in second position ) */
  61.667% { margin-left: -100%; } /* start sliding */
  66.667% { margin-left: -200%; } /* done sliding */
  /* (stays in third position ) */
  95% { margin-left: -200%; } /* start sliding */
  100% { margin-left: 0; } /* done sliding - back to initial position */
}

它可以像这样应用于第一张幻灯片（根据需要调整过渡时间）：

.slide:first-of-type {
  animation: slide 10s ease;
  animation-iteration-count: infinite;
}

完成此操作后，您只需根据自己的喜好进行调整即可。试用幻灯片持续时间和过渡类型。也许改变动画最后重复的方式。当您将鼠标悬停在“查看窗口”上时，甚至可以使用animation-play-state属性暂停动画。我在下面提供了一个完整的演示，其中包括悬停到暂停功能。如果您不是100％清楚其工作原理，请尝试从overflow: hidden元素中删除.slide-container属性。

@keyframes slide {
  0% { margin-left: 0; }
  28.333% { margin-left: 0; }
  33.333% { margin-left: -100%; }
  61.667% { margin-left: -100%; }
  66.667% { margin-left: -200%; }
  95% { margin-left: -200%; }
  100% { margin-left: 0; }
}
.slide-container {
  overflow: hidden; /* try commenting this line out! */
  width: 150px;
  height: 100px;
  border: 1px solid #000000;
}
.slide {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.slide:first-of-type {
  animation: slide 10s ease;
  animation-iteration-count: infinite;
}
.slide-container:hover .slide:first-of-type {
  animation-play-state: paused;
}

<div class="slide-container">
  <div class="slide" style="background: #ff0000">div 1 goes here!</div><div class="slide" style="background: #00ff00">div 2 goes here!</div><div class="slide" style="background: #0000ff">div 3 goes here!</div>
</div>

以下是jsFiddle上的相同演示。

使用CSS动画div滑块

2 个答案: