有沒有方法來修改這個沒有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的？

回答

相關問題