简单幻灯片仅使用css和html

是否可以只使用CSS和HTML开发一个简单的幻灯片？如果是的话，有人能给我指点一下吗？jquery是幻灯片开发的必备工具吗？因为谷歌搜索的结果几乎与jquery一起使用。

下面是一篇如何实现这一点的文章——由Smashing杂志撰写

---

对于纯html幻灯片，请使用“http等价刷新”元标记。Simple避免了jscript和functional。一个可能的缺点是，可能会影响某些浏览器的后退按钮？

是的，您可以制作简单的CSS-HTML幻灯片。如果您想使用图像，只需用img替换h1标记

工作区：

下面是简单的代码：

    <div id="slideshow">
      <div class="slide-wrapper">
        <div class="slide"><h1 class="slide-number">1</h1></div>
        <div class="slide"><h1 class="slide-number">2</h1></div>
        <div class="slide"><h1 class="slide-number">3</h1></div>
        <div class="slide"><h1 class="slide-number">4</h1></div>
        <div class="slide"><h1 class="slide-number">5</h1></div>
        <div class="slide"><h1 class="slide-number">6</h1></div>
      </div>
    </div>

<style>  
    body {
      font-family: Helvetica, sans-serif;
      padding: 5%;
      text-align: center;
    }

    #slideshow {
      overflow: hidden;
      height: 510px;
      width: 728px;
      margin: 0 auto;
    }

    .slide-wrapper {
      width: 2912px;
      -webkit-animation: slide 10s ease infinite;
    }

    .slide {
      float: left;
      height: 510px;
      width: 728px;
    }

    .slide:nth-child(1) {
      background: #D93B65;
    }

    .slide:nth-child(2) {
      background: #037E8C;
    }

    .slide:nth-child(3) {
      background: #36BF66;
    }

    .slide:nth-child(4) {
      background: #D9D055;
    }

    .slide:nth-child(5) {
      background: #D9D055;
    }

    .slide:nth-child(6) {
      background: #D9D055;
    }

    .slide-number {
      color: #000;
      text-align: center;
      font-size: 10em;
    }

    @-webkit-keyframes slide {
      20% {margin-left: 0px;}
      30% {margin-left: -728px;}
      50% {margin-left: -728px;}
      60% {margin-left: -1456px;}
      70% {margin-left: -1456px;}
      80% {margin-left: -2184px;}
      90% {margin-left: -2184px;}
    }
</style>

1.
2.
3.
4.
5.
6.
身体{
字体系列：Helvetica，无衬线；
填充：5%；
文本对齐：居中；
}
#幻灯片放映{
溢出：隐藏；
高度：510px；
宽度：728px；
保证金：0自动；
}
.滑套{
宽度：2912px；
-webkit动画：幻灯片10s轻松无限；
}
.幻灯片{
浮动：左；
高度：510px；
宽度：728px；
}
.幻灯片：第n个孩子（1）{
背景#D93B65；
}
.幻灯片：第n个孩子（2）{
背景#037E8C；
}
.幻灯片：第n个孩子（3）{
背景#36BF66；
}
.幻灯片：第n个孩子（4）{
背景：#D9D055；
}
.幻灯片：第n个孩子（5）{
背景：#D9D055；
}
.幻灯片：第n个孩子（6）{
背景：#D9D055；
}
.幻灯片编号{
颜色：#000；
文本对齐：居中；
字号：10em；
}
@-webkit关键帧幻灯片{
20%{左边距：0px；}
30%{左边距：-728px；}
50%{左边距：-728px；}
60%{左边距：-1456px；}
70%{左边距：-1456px；}
80%{左边距：-2184px；}
90%{左边距：-2184px；}
}

答案

我建议搜索“纯css幻灯片”，缩小搜索结果的范围。