CSS：使用radio：checked滑動圖像（純CSS滑塊）

Question

目標是僅使用CSS創建滑塊。 對於此嘗試，我嘗試使用200px x 1500px的圖像，該圖像具有“ 3個部分”（彩色編碼），絕對定位為Left：0，默認選中的單選按鈕顯示圖像的前500px（幻燈片1），因為包裝器為200x500隱藏溢出的像素。 通過標簽“ slide2”檢查單選按鈕，將圖像左移-500px，可以得到下一個500px（幻燈片2）。 暫時工作正常。 我遇到的問題是使圖像滑動-1000px，從而顯示了圖像的最終500px（幻燈片3）。 看來，當我添加第三個單選輸入和標簽時，滑塊斷開，其他輸入無任何作用。 實際上，第一個單選按鈕css有時似乎毫無意義，因為在圖像本身上設置過渡效果對於獲得“ Slide 1”單選按鈕所需的效果似乎是必要的。

鏈接到圖像： 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;
}*/

感謝幫助！ 而且，如果有一種更簡單的方法來制作帶有CSS控件的滑塊，我很想知道。 嘗試了一些我在網上找到的示例，但沒有一個看起來或動畫出我想要的樣子。

Answer 1

在這里-合並了您的一些CSS，使用第3張圖片對其進行了擴展，並正在使用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>

CSS：使用radio：checked滑動圖像（純CSS滑塊）

問題描述

1 個解決方案

解決方案1
0 已采納 2017-02-23 01:07:40

CSS：使用radio：checked滑動圖像（純CSS滑塊）

問題描述

1 個解決方案

解決方案1 0 已采納 2017-02-23 01:07:40

解決方案1
0 已采納 2017-02-23 01:07:40