简单幻灯片只使用css和html

Question

可以只使用CSS和HTML开发一个简单的幻灯片吗？如果是这样的话，有谁可以指导我吗？jquery是幻灯片开发的必备工具吗?因为google搜索的结果几乎和jquery一起使用。

Answer 1

这是一个如何实现这一点的good example -由Smashing杂志撰写

Demo

Answer 2

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

工作JsFiddle：https://jsfiddle.net/usm10hfy/

下面是简单的代码：

    <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>

由http://www.joblesspanda.com/回答

Answer 3

对于只有html的幻灯片，使用"http-equiv refresh“元标签。Simple避免了jscript和函数式。一个可能的缺点，可能会影响一些浏览器的后退按钮？