css3 html5-希望能够显示图像，并有左/右箭头滚动到下一个

有没有一种方法可以只使用css3和html5代码在页面中央显示一个图像，并在左右两侧有箭头作为覆盖，当点击时将过渡到下一个图像

我有大约20张照片，我想滚动浏览。我看到有很多jquery和javascript可以实现这一点，但我想知道是否可以通过使用css3/html5代码来实现

这是一个网站，做一些类似的小图片，然后点击他们得到更大的，但我不需要所有的细节，只是当你点击更大的图片，我想有一个能够滚动照片使用箭头的效果

例如：

亲切问候,，

---

比尔

你可以查看Bootstrap的旋转木马，它正是你想要的

以下是您将如何使用它，前提是您包含Bootstrap的JavaScript文件，并将页面链接到Bootstrap的样式表：

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
        <img src="image1.jpg" alt=""/>
        <div class="carousel-caption"></div>
    </div>
    <div class="item">
        <img src="image2.jpg" alt=""/>
        <div class="carousel-caption"></div>
    </div>
    <div class="item">
        <img src="image3.jpg" alt=""/>
        <div class="carousel-caption"></div>
    </div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

---

CSS3转换可以用于旋转木马动画，我建议使用它们而不是jQuery

.animate（）

，因为它们的性能更好

CSS转换 然后通过改变CSS中的边距（左或右，取决于方向），这将触发转换

.carousel { margin-left: -100%; }

旋转木马通常仍然需要一些JavaScript来完成其功能，无论是单击事件还是启用自动滚动等

我们可以使用：target选择器，因此我们可以在单击时执行某些操作

目标示例 HTML 这里有一个转盘示例，它不使用JavaScript

使用单选按钮来处理单击事件是一种非常聪明的方法。

有一个查看原始教程»链接的视图-您试过看这个吗？是的，只使用CSS（复选框hack）是可能的，但是让JavaScript进行切换会更干净。你可能还想看看这个

.carousel { transition: all cubic-bezier(0.77, 0, 0.175, 1); }

.carousel { margin-left: -100%; }

<a href="#" class="left">Prev</a>
<ul class="carousel">
    <li>Slide 1</li>
    <li>Slide 2</li>
</ul>
<a href="#" class="right">Next</a>

.left:target ~ .carousel{
    margin-left: 100%;
}