Question

是否可以仅使用CSS和HTML开发简单的幻灯片？如果是这样，有人可以指导我吗？ jquery是幻灯片开发的必需品，因为google搜索的结果几乎与jquery一起使用。

Answer 1

这是如何实现这一目标的good example - 由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的幻灯片，请使用＆＃34; http-equivs refresh＆＃34;元标记。简单避免jscript和功能。一个可能的缺点，可能会影响一些浏览器后退按钮？

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

3 个答案: