Question

我发现这个图片轮播here我想知道是否有办法让它不是自动滚动，而是有导航按钮，以及使其响应。有没有办法做到这一点，但仍然只保留Css？

<h1>css3 carousel</h1>

<div class="carousel">
<div class="holder">
<img src="http://fakeimg.pl/200x100" alt="" />
<img src="http://fakeimg.pl/300x200" alt="" />
<img src="http://fakeimg.pl/400x300" alt="" />
<img src="http://fakeimg.pl/200x100" alt="" />
<img src="http://fakeimg.pl/500x400" alt="" />
<img src="http://fakeimg.pl/210x105" alt="" />
<img src="http://fakeimg.pl/200x100" alt="" />
<img src="http://fakeimg.pl/250x150" alt="" />
<img src="http://fakeimg.pl/200x100" alt="" />
<img src="http://fakeimg.pl/200x100" alt="" />
<img src="http://fakeimg.pl/200x100" alt="" />
<img src="http://fakeimg.pl/200x100" alt="" />
 </div>
</div>


@import url(http://fonts.googleapis.com/css?family=PT+Sans);

body {
font-family: 'PT Sans', Arial, Verdana;
background-color: #eee;
}

h1 {
text-align: center;
font-size: 48px;
 text-transform: uppercase;
 letter-spacing: 3px;
 color: #222;
}

img {
display: inline-block;
width: 200px;
height: 100px;
}

.carousel {
 width: 830px;
 height: 120px;
 overflow: hidden;
 padding: 8px;
 box-sizing: border-box;
 border: 2px solid #999;
 box-shadow: 0 0 4px #000;
 margin: 0 auto;
  border-radius: 5px;

   }

.holder {
 animation: carousel 25s linear infinite;
 white-space: nowrap;
  will-change: transform;

  &:hover {
  animation-play-state: paused;
  }
 }

 @keyframes carousel {
   0% {
   transform: translateX(0);
 }

   50% {
   transform: translateX(-100%);
   }

   100% {
  transform: translateX(0);
  }
  }

Answer 1

稍微更改CSS会添加一个基本的悬停功能，以启动滑块形成停止位置。

.holder {
  animation: carousel 25s linear;
  white-space: nowrap;
  will-change: transform;
  animation-play-state: paused;

  &:hover {
    animation-play-state: running;
  }
}

使用“媒体查询”可以轻松实现响应。

但是考虑到你想让它具有响应性，那么你需要“点击事件”才能使它在移动设备上运行（因为移动设备没有悬停功能）。 CSS无法执行单击事件，因此您将需要javascript或jQuery。但这应该是相当直接的，你只需要通过简单的点击事件来改变小CSS。然而，考虑到无数的免费和基本旋转木马插件，我会选择其中之一。你在这里看到的似乎是CSS动画的演示，如果没有某种javascript，你在CSS动画控制方面总会受到限制。

有没有办法在没有JS或Jquery的情况下修改它？

1 个答案: