CSS：使用單選滑動圖像：選中（純CSS滑塊）

目標是僅使用CSS創建滑塊。對於這種嘗試，我嘗試使用具有「3個部分」（顏色編碼）的200px×1500px圖像絕對定位爲左：0，默認選中的單選按鈕顯示圖像的第一個500像素（幻燈片1），因爲包裝是隱藏溢出的200x500像素。檢查通過'slide2'標籤的單選按鈕，通過定位圖像Left：-500px，給我下一個500像素的圖像（幻燈片2）。目前工作正常。我得到的問題是讓圖像滑動-1000像素，從而顯示圖像的最後500像素（幻燈片3）。看起來，當我添加第三個無線電輸入和標籤時，滑塊斷開，其他輸入不起作用。事實上，第一個單選按鈕css有時似乎毫無意義，因爲在圖像上設置轉換本身似乎對於獲得'幻燈片1'單選按鈕的所需效果是必要的。CSS：使用單選滑動圖像：選中（純CSS滑塊）

鏈接到圖片：http://imgur.com/a/DCiI4

HTML：

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="default.css"/> 
    </head> 
<body> 
    <div id="wrap"> 
     <input type="radio" id="slide1" name="radio" checked> 
     <input type="radio" id="slide2" name="radio"> 
     <!--<input type="radio" id="slide3" name="radio">--> 
     <img src="images/slides.jpg"/> 
     <label for="slide1">slide1</label> 
     <label for="slide2">slide2</label> 
     <!--<label for="slide3">slide3</label>--> 
    </div> 
</body> 
</html>

CSS：

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#wrap { 
    width: 500px; 
    height: 200px; 
    background: #000; 
    color: #fff; 
    position: relative; 
    /*overflow: hidden;*/ 
} 

img { 
    position: absolute; 
    top: 20; 
    left: 0; 
    transition: .5s ease-out; 
    height: 200px; 
    width: 1500px; 
} 

input[type="radio"] { 
    display: none; 
} 

#slide1:checked + img { 
    left: 0; 
    transition: .5s ease-out; 
} 

#slide2:checked + img { 
    left: -500px; 
    transition: .5s ease-out; 
} 

/*#slide3:checked + img { 
    left: -1500px; 
    transition: .5s ease-out; 
}*/

感謝幫助！如果有一種更容易/更簡單的方法來製作帶有控件的滑塊，我很想知道。嘗試了我在網上找到的幾個例子，但沒有看到或生動的相當我想。

來源

2017-02-23 3412127

這裏雅 - 去鞏固你的一些CSS，用第三張圖片擴展它，並使用translateX()和opacity來增強幻燈片之間的轉換。

img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    transition: opacity .5s ease-out, transform .5s ease-out; 
 
    transform: translateX(-100%); 
 
    /* transform: translateX(-100%) rotate(-720deg); */ /* try this, it's nuts */ 
 
    opacity: 0; 
 
} 
 

 
input[type="radio"] { 
 
    display: none; 
 
} 
 

 
input:checked + img { 
 
    transform: translateX(0); 
 
    /* transform: translateX(0) rotate(0); */ /* try this with the commented line above */ 
 
    opacity: 1; 
 
    z-index: 1; 
 
} 
 

 
.controls { 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    z-index: 2; 
 
} 
 

 
label { 
 
    background: rgba(0,0,0,0.8); 
 
    color: #fff; 
 
    padding: .5em; 
 
    margin: 0 1em 0 0; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
}

<div id="wrap"> 
 
    <input type="radio" id="slide1" name="radio" checked> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" /> 
 
    <input type="radio" id="slide2" name="radio"> 
 
    <img src="http://www.star2.com/wp-content/uploads/2015/06/happy-days-770x470.jpg"> 
 
    <input type="radio" id="slide3" name="radio"> 
 
    <img src="https://timedotcom.files.wordpress.com/2016/08/henry-winkler.jpg?quality=85"> 
 
    <div class="controls"> 
 
    <label for="slide1">slide1</label> 
 
    <label for="slide2">slide2</label> 
 
    <label for="slide3">slide3</label> 
 
    </div> 
 
</div>

來源

2017-02-23 01:07:40

謝謝邁克爾的偉大工程。快速提問：在上一張圖像滑出之前，如何設置延遲？所以它看起來像新的圖像滑動重疊呢？非常感謝你！ – 3412127

@ 3412127 np。你無法單獨使用CSS。你需要使用JavaScript。你真的試圖用CSS來創建類似的東西。 –

@ 3412127 btw歡迎來到SO。如果他們幫助鼓勵參與並向任何搜索您的問題的人展示並發現該帖子哪些答案是好的，並且一定要接受某個答案（答案中的複選標記） –

CSS：使用單選滑動圖像：選中（純CSS滑塊）

回答

相關問題