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

我发现这个图像旋转木马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); 
    } 
    }

来源

2016-09-13 mpeterson

您不会仅使用CSS导航按钮。响应能力肯定是可能的，但我不知道你想在这件事上达成什么目标，以及你已经尝试了些什么。 – Senthe

你能解释为什么当普通的滑块有导航并且[this]（http://codepen.io/reannea/pen/egDGd）有导航时它是不可能的？并且通过resposive，我的意思是适合所有屏幕。因此，如果我调整页面大小，图像和容器本身就会响应页面，而无需像现在这样添加滚动选项。 – mpeterson

您的示例可以具有导航功能，因为它是用于石头数量的元素（在这种情况下是两个），对于具有未知图像数量的图像库，这在CSS中是一种痛苦/不可能，我会考虑它为生产目的强烈推荐（除非你只是想像这个codepen的作者一样乱七八糟）。至于轮播，您可以简单地添加'max-width：100％'来强制其调整大小。 – Senthe

稍微更改您的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动画控制方面，你总是会受到限制。

来源

2016-09-13 16:59:45

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

回答

相关问题