2

有没有办法只使用 css3 和 html5 代码在页面中央显示图像，并在左右两侧有箭头作为叠加层，单击时将转换到下一个图像？

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

这是一个对小图像进行类似操作的网站，然后单击它们以获取更大的图像，但我不需要所有这些细节，只是当您单击较大的图像时，我希望具有能够滚动的效果通过使用箭头的照片。

例如：http ://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/demo.php

亲切的问候，比尔

4

2 回答 2

1

CSS3 过渡可用于轮播动画，我建议使用它们而不是 jQuery .animate()，因为它们的性能更好。

CSS 过渡

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

然后通过更改 CSS 中的边距（根据方向向左或向右），这将触发过渡。

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

Carousels 通常仍然需要一些 JavaScript 来完成它们的功能，无论是点击事件还是启用自动滚动等。

:target 选择器可供我们使用，因此我们可以在点击时做一些事情。

目标示例

HTML

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

CSS

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

有一个不使用 JavaScript 的轮播示例，可以在此处找到

没有 Javascript 的响应式 CSS3 滑块

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

于 2013-05-01T16:55:55.790 回答
0

您可以查看 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>

它带有箭头、指示器（如果你有很多图片，你可以删除它们）和左/右导航图标。

您还可以让它每 X 秒自动循环一次图片，您可以定义以下方式：

$('.carousel').carousel({
  interval: 2000 /* 2 seconds */
})
于 2013-05-01T14:09:52.890 回答