幻灯片の纯CSS，NO JavaScript

之前就遇到有人问，不用js，纯css实现幻灯片。

那么对于使用纯的css + html 怎样来实现幻灯片呢？下面有几种方法可供参考，有些还不成熟。

方案一：利用css3的animation

例子传送门点我，点我！

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title>幻灯片</title>  <style>    .ani {      width: 440px;      height: 440px;      margin: 50px auto;      overflow: hidden;      box-shadow: 0 0 5px rgba(0, 0, 0, 1);      background-size: cover;      background-position: center;      -webkit-animation-name: loops;      -webkit-animation-duration: 20s;      -webkit-animation-iteration-count: infinite;    }    @-webkit-keyframes loops {      0% {        background: url(../images/01.jpg) no-repeat;      }      25% {        background: url(../images/02.jpg) no-repeat;      }      50% {        background: url(../images/03.jpeg) no-repeat;      }      75% {        background: url(../images/04.jpg) no-repeat;      }      100% {        background: url(../images/05.jpg) no-repeat;      }    }  </style></head><body><div class="ani"></div></body></html>

方案二：把需要展示的图片集合并长一个长横图，然后再通过:hover伪类来改变图片的位置，从而达到幻灯片的效果

例子传送门还是点我吧

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <title></title>  <style type="text/css">    #wrap {      width: 580px;      height: 440px;      background: #9ed2d9;      border: 5px solid #9ed2d9;      position: relative;      margin: 30px auto 20px auto;      -o-border-radius: 20px;      -icab-border-radius: 20px;      -khtml-border-radius: 20px;      -moz-border-radius: 20px;      -webkit-border-radius: 20px;      border-radius: 20px;    }    #slide {      padding: 370px 0 0 0;      margin: 0;      list-style: none;      width: 480px;      height: 30px;      overflow: hidden;      position: absolute;      left: 48px;      top: 29px;    }    #slide b {      float: left;    }    #slide span {      position: absolute;      left: 0;      top: 0;      height: 360px;      width: 480px;      border: 1px solid #698639;      border-color: #698639 #e0ebcb #e0ebcb #698639;    }    #slide b.overlay {      display: block;      width: 490px;      height: 370px;      background: transparent;      position: absolute;      top: -5px;      left: -5px;    }    #slide i {      display: block;      float: left;      margin-right: 5px;      width: 20px;      height: 20px;      color: #000;      line-height: 19px;      font-family: arial, sans-serif;      font-style: normal;      font-size: 11px;      text-align: center;      cursor: pointer;    }    #slide b img {      display: block;      border: 0;      position: absolute;      top: 0;      left: -1px;      -webkit-transition: all 0.7s ease-in-out;    }    #slide i:hover {      background-position: 0 -20px;      color: #fff;    }    #slide .p1:hover img {      left: -1px;    }    #slide .p2:hover img {      left: -481px;    }    #slide .p3:hover img {      left: -961px;    }    #slide .p4:hover img {      left: -1441px;    }    #slide .p5:hover img {      left: -1921px;    }    #slide .p6:hover img {      left: -2401px;    }    #slide .p7:hover img {      left: -2881px;    }    #slide .p8:hover img {      left: -3361px;    }    #slide .p9:hover img {      left: -3841px;    }    #slide .p10:hover img {      left: -4321px;    }  </style></head><body><div id="wrap">  <div id="slide">    <b class="p1"><i>1</i>      <b class="p2"><i>2</i>        <b class="p3"><i>3</i>          <b class="p4"><i>4</i>            <b class="p5"><i>5</i>              <b class="p6"><i>6</i>                <b class="p7"><i>7</i>                  <b class="p8"><i>8</i>                    <b class="p9"><i>9</i>                      <b class="p10"><i>10</i><span><img src='/images/loading.gif' data-original="../images/long.jpg"  /></span></b>                    </b>                  </b>                </b>              </b>            </b>          </b>        </b>      </b>    </b>    <b class="overlay"></b>  </div> <!-- end slide --></div></body></html>

方案三：利用描点。通过点击描点来选择图片，达到幻灯片的效果。

我没有传送门，你们抢吧。

原标题：幻灯片の纯CSS，NO JavaScript

关键词：JavaScript