简单的幻灯片只使用css和html

Question

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

Answer 1

这里有一个如何实现这一点的好例子-由Smashing Magazine 撰写

演示

Answer 2

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

工作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和函数。一个可能的缺点，可能会影响一些浏览器的后退按钮？