如何仅使用HTML和CSS创建图像滑块？

Question

是否可以使用HTML和CSS创建滑块？如果是,而不是如何使用HTML和CSS创建滑块？

Answer 1

是试试这个代码.这是一个简单的css滑块链接

HTML代码

@-webkit-keyframes slidy {
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}
@keyframes slidy {
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}
body {
  margin: 0;
}
div#slider {
  overflow: hidden;
}
div#slider figure img {
  width: 20%;
  float: left;
}
div#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 10s slidy infinite;
  /* change this time to reduce time*/
  -webkit-animation: 10s slidy infinite;
  /* change this time to reduce time*/
}

<div id="slider">
  <figure>
    <img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
    <img src="http://demosthenes.info/assets/images/taj-mahal.jpg" alt="">
    <img src="http://demosthenes.info/assets/images/ibiza.jpg" alt="">
    <img src="http://demosthenes.info/assets/images/ankor-wat.jpg" alt="">
    <img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
  </figure>
</div>