有没有方法来修改这个没有JS或JQuery的？

  • Z时代
  • 2024-01-10
  • 分类：问答

我发现这个图像旋转木马here我想知道是否有办法让它不是自动滚动，而是有导航按钮，以及使其响应。有没有办法做到这一点，但仍然只有Css？有没有方法来修改这个没有JS或JQuery的？

<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); 
    } 
    }

回答：

稍微更改您的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的？ 的全部内容， 来源链接： utcz.com/qa/265392.html

回到顶部