当前位置：theitroad>javascript 如何仅使用 CSS 制作图像轮播？

javascript 如何仅使用 CSS 制作图像轮播？

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/30295085/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-28 12:00:52 　来源:igfitidea点击:

How can I make an image carousel with only CSS?

javascriptjqueryhtmlcss

提问by royhowie

I'm looking to make an image carousel, where a user can toggle between images, by clicking on arrows. For example:

我希望制作一个图像轮播，用户可以通过单击箭头在图像之间切换。例如：

image of an image carousel

图像轮播的图像

However, I can only use HTML and CSS—no JavaScript (and, therefore, jQuery). I just need the basic setup; smooth transitions and the like are not necessary.

但是，我只能使用 HTML 和 CSS，不能使用 JavaScript（因此，使用 jQuery）。我只需要基本设置；不需要平滑过渡等。

How can I go about accomplishing this?

我怎样才能做到这一点？

回答by royhowie

That's easy! Just use radio buttons and targeted labels.

这很容易！只需使用单选按钮和目标标签。

Radio buttons have the (necessary) behavior of only allowing one to be selected at any one time—just like an image in our carousel.

单选按钮具有（必要的）行为，即在任何时候都只允许选择一个——就像我们轮播中的图像一样。

Demo

演示

div.wrap2 {
  float: left;
  height: 500px;
  width: 422px;
}
div.group input {
  display: none;
  left: -100%;
  position: absolute;
  top: -100%;
}
div.group input ~ div.content {
  border: solid 1px black;
  display: none;
  height: 350px;
  margin: 0px 60px;
  position: relative;
  width: 300px;
}
div.group input:checked ~ div.content {
  display: block;
}
div.group input:checked ~ label.previous,
div.group input:checked ~ label.next {
  display: block;
}
div.group label {
  background-color: #69c;
  border: solid 1px black;
  display: none;
  height: 50px;
  width: 50px;
}
img {
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
}
p {
  text-align: center;
}
label {
  font-size: 4em;
  margin: 125px 0 0 0;
}
label.previous {
  float: left;
  padding: 0 0 30px 5px;
}
label.next {
  float: right;
  padding: 0 5px 25px 0;
  text-align: right;
}
<div class="wrap">
  <div class="wrap2">
    <div class="group">
      <input type="radio" name="test" id="0" value="0">
      <label for="4" class="previous">&lt;</label>
      <label for="1" class="next">&gt;</label>
      <div class="content">
        <p>panel #0</p>
        <img src="http://i.stack.imgur.com/R5yzx.jpg" width="200" height="286">
      </div>
    </div>
    <div class="group">
      <input type="radio" name="test" id="1" value="1">
      <label for="0" class="previous">&lt;</label>
      <label for="2" class="next">&gt;</label>
      <div class="content">
        <p>panel #1</p>
        <img src="http://i.stack.imgur.com/k0Hsd.jpg" width="200" height="139">
      </div>
    </div>
    <div class="group">
      <input type="radio" name="test" id="2" value="2">
      <label for="1" class="previous">&lt;</label>
      <label for="3" class="next">&gt;</label>
      <div class="content">
        <p>panel #2</p>
        <img src="http://i.stack.imgur.com/Hhl9H.jpg" width="140" height="200">
      </div>
    </div>
    <div class="group">
      <input type="radio" name="test" id="3" value="3" checked="">
      <label for="2" class="previous">&lt;</label>
      <label for="4" class="next">&gt;</label>
      <div class="content">
        <p>panel #3</p>
        <img src="http://i.stack.imgur.com/r1AyN.jpg" width="200" height="287">
      </div>
    </div>
    <div class="group">
      <input type="radio" name="test" id="4" value="4">
      <label for="3" class="previous">&lt;</label>
      <label for="0" class="next">&gt;</label>
      <div class="content">
        <p>panel #4</p>
        <img src="http://i.stack.imgur.com/EHHsa.jpg" width="96" height="139">
      </div>
    </div>
  </div>
</div>

TLDR: Important notes

TLDR：重要说明

  • Make sure at least one input(type="radio")is checkedby default, or the whole carousel will be hidden.
  • Hide the input radios and use labels as the previous/next buttons
  • Make sure the labelscorrectly target the previous/next radio input (see labels section at the end on how to do the targeting)
  • Show an image when its corresponding input radio is :checked
  • Use cute kitten pictures
  • 确保至少有一个input(type="radio")是checked默认的，否则整个轮播将被隐藏。
  • 隐藏输入单选并使用标签作为上一个/下一个按钮
  • 确保labels正确定位上一个/下一个无线电输入（有关如何进行定位，请参阅最后的标签部分）
  • 当其对应的输入收音机为时显示图像 :checked
  • 使用可爱的小猫图片

Explanation

解释

Here's what the basic HTML structure should look like:

下面是基本的 HTML 结构应该是这样的：

div#holder
    div.group
        input(type="radio")
        label.previous
        label.next
        div.content
            img
    div.group
        // ... repeat as necessary

div#holderwill hold all of our content in place. Then, we'll group our radio buttons, labels, and images all under a div.group. This makes sure our radio inputs don't suffer from destructive interference (pun).

div#holder将保留我们所有的内容。然后，我们将把我们的单选按钮、标签和图像都放在一个div.group. 这可确保我们的无线电输入不会受到破坏性干扰（双关语）。

The key is in the selectors (and the labels—make sure to read that section)

关键在选择器（和标签——请务必阅读该部分）

First, we'll hide our radio buttons—they're ugly anyway:

首先，我们将隐藏我们的单选按钮——反正它们很丑：

div.group input {
    display: none;
    position: absolute;
    top: -100%;
    left: -100%;
}

We won't ever have to click the radio buttons. Instead, we'll style our labels and add targets (forproperties), so that they redirect the click to the appropriate radio input block.

我们永远不必单击单选按钮。相反，我们将设置标签样式并添加目标（for属性），以便它们将点击重定向到适当的无线电输入块。

Most of our labels should be hidden:

我们的大部分标签都应该隐藏：

div.group label {
    display: none;
}

(I will omit all aesthetic styling, so as to make the styling easier to understand. You can see the better-looking version in the stack snippet.)

（我将省略所有美学样式，以使样式更易于理解。您可以在堆栈片段中看到更好看的版本。）

Except for those next to a radio input that is toggled on, or :checked

除了打开的无线电输入旁边的那些，或 :checked

div.group input:checked ~ label.previous,
div.group input:checked ~ label.next {
    display: block;
}

In addition, the div.contentfollowing a checked input should also be displayed:

此外，div.content还应显示以下选中的输入：

div.group input:checked ~ div.content {
    display: block;
}

However, when the radio button is not checked, div.contentshould be hidden:

但是，当未选中单选按钮时，div.content应隐藏：

div.group input ~ div.content {
    display: none;
    position: relative;
}

Bazinga! Now our carousel should be fullymostly functional, albeit a little ugly. Let's move our labels to the correct position:

巴辛加！现在我们的旋转木马应该是完全正常的，虽然有点难看。让我们将标签移动到正确的位置：

label.previous { float: left; }
label.next { float: right; }

And center our images within their respective divs:

并将我们的图像放在各自的 div 中：

img {
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
}

The last step is how you set up your labels:

最后一步是如何设置标签：

<input type="radio" id="1">
<label class="previous" for="0">&lt;</label>
<label class="next" for="2">&gt;</label>

Note how, given a radio input with an idof n, the label.previouswill have a forattribute of (n - 1) % Mand the label.nextwill have a forattribute of (n + 1) % M, where Mis the number of images in the carousel.

请注意，给定带有idof的无线电输入n，label.previous将具有for属性 of(n - 1) % M并且label.next将具有for属性(n + 1) % M，其中M是轮播中的图像数量。

Extra

额外的

If you're using Jade (or some other template engine), you can set it up with a simple for-loop like this:

如果您使用的是 Jade（或其他一些模板引擎），您可以使用一个简单的 for 循环来设置它，如下所示：

div.wrap2
    - var imgs = [[200, 286], [200, 139], [140, 200], [200, 287], [96, 139]];
    - for (var i = 0; i < imgs.length; i++)
        div.group
            input(type="radio" name="test" id="#{i}" value="#{i}" checked="#{input == 3}")
            label(for="#{(i - 1 + imgs.length) % imgs.length}").previous &lt;
            label(for="#{(i + 1) % imgs.length}").next &gt;
            div.content
                p panel ##{i}
                img(src="http://placekitten.com/g/#{imgs[i].join('/')}"
                    height="#{imgs[i][1]}"
                    width="#{imgs[i][0]}"
                )

回答by guest271314

Note, cssbelow does notmeet the specific requirement at Question

注意，css以下不符合问题的具体要求

where a user can toggle between images, by clicking on arrows.

用户可以通过单击箭头在图像之间切换。

Utilizes :targetpseudo class, thumbnails as controls to toggle between images ; modeled on pattern described at How to Trigger CSS3 Transitions on Click using :target

利用伪类，缩略图作为控件在图像之间切换；以如何使用 :target 触发 CSS3 Transitions on Click 中描述的模式为蓝本:target

body {
  width: 70%;
  overflow: hidden;
}

section {
  position: relative;
  display: block;
  left: calc(50%);
}
/* set `div` container `background` to last `div img` `src` */
div {
  display: inline-block;
  position: relative;
  height: 100px;
  width: 100px;
  background: url(http://lorempixel.com/100/100/cats);
  border: 0.1em outset black;
}
/* set `img` `opacity:0`  */
div img {
  position: absolute;
  transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  opacity: 0;
}
/* 
   display `:target` `img` on click of `a`,
   having `img` as fragment identifier 
*/
div img:target {
  opacity: 1;
  animation: active 1s ease-in-out 0s normal 1 both;
  -moz-animation: active 1s ease-in-out 0s normal 1 both;
  -webkit-animation: active 1s ease-in-out 0s normal 1 both;
}
/* `.thumbs` `span` elements */
.thumbs {
  height: 25px;
  width: 25px;
  padding: 1px;
  display: inline-block;
  position: relative;
  text-align: center;
  border: 0.1em inset black;
  border-radius: 50px;
  font-size: 1em;
}
/* set `background` of `.thumbs` `span` elements  */
[href="#3"] .thumbs {
  background: url(http://lorempixel.com/100/100/cats);
  background-size: 100%;
  background-repeat: no-repeat;
}

[href="#2"] .thumbs {
  background: url(http://lorempixel.com/100/100/animals);
  background-size: 100%;
  background-repeat: no-repeat;
}

[href="#1"] .thumbs {
  background: url(http://lorempixel.com/100/100/technics);
  background-size: 100%;
  background-repeat: no-repeat;
}

[href="#0"] .thumbs {
  background: url(http://lorempixel.com/100/100/nature);
  background-size: 100%;
  background-repeat: no-repeat;
}

span:hover {
  border-top: 0.1em solid gold;
  border-left: 0.1em solid yellow;
  border-bottom: 0.1em solid orange;
  border-right: 0.1em solid goldenrod;
  box-shadow: 0 0 0 0.125em sienna, 0 0 0 0.225em dodgerblue;
}

a {
  top: 30%;
  text-decoration: none;
  display: inline-block;
  position: relative;
  color: transparent;
}

nav a {
  left: -16px;
}

@keyframes active {
  0% {
    box-shadow: 0 0 0 0.125em dodgerblue, 0 0 0 0.25em yellow;
  }
  100% {
    box-shadow: none;
  }
}

@-webkit-keyframes active {
  0% {
    box-shadow: 0 0 0 0.125em dodgerblue, 0 0 0 0.25em yellow;
  }
  100% {
    box-shadow: none;
  }
}

@-moz-keyframes active {
  0% {
    box-shadow: 0 0 0 0.125em dodgerblue, 0 0 0 0.25em yellow;
  }
  100% {
    box-shadow: none;
  }
}
<section>
  <div>
    <img src="http://lorempixel.com/100/100/nature" id="0" />
    <img src="http://lorempixel.com/100/100/technics" id="1" />
    <img src="http://lorempixel.com/100/100/animals" id="2" />
    <img src="http://lorempixel.com/100/100/cats" id="3" />
  </div>
  <nav>
    <a href="#3">
      <span class="thumbs">  
      </span>
    </a>
    <a href="#2">
      <span class="thumbs">  
       </span>
    </a>
    <a href="#1">
      <span class="thumbs">  
      </span>
    </a>
    <a href="#0">
      <span class="thumbs">  
      </span>
    </a>
  </nav>
</section>

回答by Wojciech Maj

Inspired by royhowie I ended up with a much simpler solution if it comes to HTML syntax. Also, with nice animation and fully customizable!

如果涉及到 HTML 语法，受 royhowie 的启发，我最终得到了一个更简单的解决方案。此外，还有漂亮的动画和完全可定制的！

The main idea was to create the arrows not by placing them in HTML one by one, but by creating and then carefully positioning pseudoelements.

主要的想法是创建箭头，而不是通过将它们一个一个地放置在 HTML 中，而是通过创建然后仔细定位伪元素。

* {
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.CSS_slideshow {
    display: block;
    width: 600px;
    height: 425px;
    overflow: hidden;
    margin: 0 auto;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    text-space-collapse: trim-inner;
}
.CSS_slideshow[data-show-indicators="true"][data-indicators-position="in"] {
    -webkit-margin-after: -25px; /* Removes the space under the slideshow. Webkit only as only Webkit-based browsers will support the dots in the wrapper */
}
/* Defines animation timing function */
.CSS_slideshow[data-animation-style] {
    -moz-transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}
    /* Inherit all animation properties from parent element */
    .CSS_slideshow[data-animation-style] *,
    .CSS_slideshow[data-show-buttons="true"][data-animation-style] label:before,
    .CSS_slideshow[data-show-buttons="true"][data-animation-style] label:after {
        -moz-transition-duration: inherit;
        -webkit-transition-duration: inherit;
        transition-duration: inherit;
        -moz-transition-timing-function: inherit;
        -webkit-transition-timing-function: inherit;
        transition-timing-function: inherit;
    }
    /* WRAPPER */
    .CSS_slideshow_wrapper {
        display: block;
        width: 600px;
        height: 400px;
        position: relative;
        /* Styling */
        text-align: center;
    }
        /* Indicators */
        .CSS_slideshow[data-show-indicators="true"] input {
            width: 10px;
            height: 10px;
            outline: none;
            position: relative;
            top: calc(100% + 7px);
            -ms-transform: scale(1); /* Fallback for Internet Explorer: supports radio button resizing, does not support :after. Not necessary, put for readibility. */ 
            -moz-transform: scale(0.6); /* Fallback for Firefox: does not radio button resizing, does not support :after */
            -webkit-appearance: none; /* hide radio buttons for Webkit: supports :after */
        }
        .CSS_slideshow[data-show-indicators="true"] input:checked {
            -ms-transform: scale(1.25); /* Fallback for Internet Explorer: supports radio button resizing, does not support :after */
            -moz-transform: scale(0.9); /* Fallback for Firefox: it does not do radio button resizing, does not support :after */
        }
        /* Webkit-only goodness - for now */
        .CSS_slideshow[data-show-indicators="true"] input:after {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            width: 8px;
            height: 8px;
            border: 1px solid;
            border-radius: 100%;
            cursor: pointer;
            z-index: 4;
            -moz-transition-property: transform, background;
            -webkit-transition-property: transform, background;
            transition-property: transform, background;
        }
        .CSS_slideshow[data-show-indicators="true"][data-indicators-position="under"] input:after {
            top: -2px;
            background: rgba(0, 0, 0, 0);
            border-color: rgb(0, 0, 0);
        }
        .CSS_slideshow[data-show-indicators="true"][data-indicators-position="in"] input:after {
            top: -35px;
            box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.25), 0 0 2px rgba(0, 0, 0, 0.25);
            background: rgba(235, 235, 235, 0);
            border-color: rgb(235, 235, 235);
        }
        .CSS_slideshow[data-show-indicators="true"] input:checked:after {
            -webkit-transform: scale(1.25);
        }
        .CSS_slideshow[data-show-indicators="true"][data-indicators-position="under"] input:checked:after {
            background: rgb(0, 0, 0)
        }
        .CSS_slideshow[data-show-indicators="true"][data-indicators-position="in"] input:checked:after {
            box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
            background: rgb(235, 235, 235);
        }
        .CSS_slideshow:not([data-show-indicators="true"]) input {
            display: none;
        }
        /* SLIDES */
        .CSS_slideshow label {
            display: inline-block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }
        .CSS_slideshow[data-animation-style="slide"] label {
            -moz-transition-property: left;
            -webkit-transition-property: left;
            transition-property: left;
        }
        .CSS_slideshow label img {
            width: 100%;
            height: 100%;
        }
        /* Puts all the slides on the left... */
        .CSS_slideshow label {
            left: -100%;
        }
        /* ...except the ones coming after input:checked - those are put on the right... */
        .CSS_slideshow input:checked ~ label {
            left: 100%;
        }
        /* ...except the one coming directly after input:checked - this is our current slide and it's in the middle */
        .CSS_slideshow input:checked + label {
            left: 0;
        }
            /* PREV/NEXT ARROWS */
            .CSS_slideshow[data-show-buttons="true"] label:before,
            .CSS_slideshow[data-show-buttons="true"] label:after {
                display: block;
                position: absolute;
                width: 60px;
                height: 60px;
                top: calc((100% - 60px) / 2);
                /* Styling */
                background: rgb(235, 235, 235);
                font-size: 35px;
                font-weight: 800;
                font-family: Consolas;
                line-height: 56px;
                color: black;
                z-index: 1;
                cursor: pointer;
            }
            .CSS_slideshow[data-show-buttons="true"][data-animation-style="slide"] label:before,
            .CSS_slideshow[data-show-buttons="true"][data-animation-style="slide"] label:after {
                -moz-transition-property: left, right;
                -webkit-transition-property: left, right;
                transition-property: left, right;
            }
            .CSS_slideshow[data-show-buttons="true"] label:hover:before,
            .CSS_slideshow[data-show-buttons="true"] label:hover:after {
                /* Styling */
                background: rgb(245, 245, 245);
            }
            /* Slides on the left */
            /* Since the slides are on the left, we need to move the buttons 100% to the right */
            .CSS_slideshow[data-show-buttons="true"] label:before {
                right: -100%;
                opacity: 0;
                /* Styling */
                content: '>'; /* next */
            }
            .CSS_slideshow[data-show-buttons="true"] label:after {
                left: 100%;
                opacity: 1;
                /* Styling */
                content: '<'; /* previous */
            }
            /* Slides on the right */
            /* Since the slides are on the right, we need to move the buttons 100% to the left */
            .CSS_slideshow[data-show-buttons="true"] input:checked ~ label:before {
                right: 100%;
                opacity: 1;
            }
            .CSS_slideshow[data-show-buttons="true"] input:checked ~ label:after {
                left: -100%;
                opacity: 0;
                cursor: default;
            }
            /* Active slide */
            /* And for the active slide - just usual positioning */
            .CSS_slideshow[data-show-buttons="true"] input:checked + label:before {
                right: 0;
                opacity: 0;
                cursor: default;
            }
            .CSS_slideshow[data-show-buttons="true"] input:checked + label:after {
                left: 0;
            }
            /* Buttons positioning */
            .CSS_slideshow[data-show-buttons="true"] label:after {
                z-index: 3; /* move "previous" buttons forward... */
            }
            .CSS_slideshow[data-show-buttons="true"] input:checked ~ label:after {
                z-index: 1; /* ...except the one for an active slide - this should be hidden - causes the "previous" arrow from the previous slide to be on top */
            }
            .CSS_slideshow[data-show-buttons="true"] input:checked + label + input + label:before {
                z-index: 3; /* move "next" button one slide ahead forward - causes the "next" arrow from the next slide to be on top */
            }
            /* WRAP ARROWS */
            /* We'll reuse "previous" arrow from the first slide and "next" arrow from the last to make "wrap" buttons, based on roughly the same principles */
            .CSS_slideshow[data-show-buttons="true"][data-show-wrap-buttons="true"] label:first-of-type:before,
            .CSS_slideshow[data-show-buttons="true"][data-show-wrap-buttons="true"] label:last-of-type:after {
                z-index: 2 !important;
                opacity: 1 !important;
                cursor: pointer !important;
                /* Styling */
                letter-spacing: -9px;
                text-align: left;
                padding-left: 14px;
                width: 46px;
            }
            .CSS_slideshow[data-show-buttons="true"][data-show-wrap-buttons="true"] label:first-of-type:before {
                content: '<<'; /* jump to first */
                right: 0 !important;
            }
            .CSS_slideshow[data-show-buttons="true"][data-show-wrap-buttons="true"] input:not(:checked) + label:first-of-type:before {
                right: -100% !important;
            }
            .CSS_slideshow[data-show-buttons="true"][data-show-wrap-buttons="true"] label:last-of-type:after {
                content: '>>'; /* jump to last */
                left: 0 !important;
            }
            .CSS_slideshow[data-show-buttons="true"][data-show-wrap-buttons="true"] input:not(:checked) + label:last-of-type:after {
                left: -100% !important;
            }


/* Non-CSS slideshow CSS */
body {
    font-family: Segoe UI, Tahoma, sans-serif;
    font-size: 14px;    
}

#license {
    margin-top: 3em;
    text-align: center;
    font-size: 10px;
}
    #license * {
        font-size: 10px;
    }
<div
    class="CSS_slideshow"
    data-show-indicators="true"
    data-indicators-position="in"
    data-show-buttons="true"
    data-show-wrap-buttons="true"
    data-animation-style="slide"
    style="-moz-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;"
>
    <div class="CSS_slideshow_wrapper">
        <input type="radio" name="css3slideshow" id="slide1" checked /><!--
     --><label for="slide1"><img src="https://placekitten.com/g/602/400" /></label><!--
     --><input type="radio" name="css3slideshow" id="slide2" /><!--
     --><label for="slide2"><img src="https://placekitten.com/g/605/400" /></label><!--
     --><input type="radio" name="css3slideshow" id="slide3" /><!--
     --><label for="slide3"><img src="https://placekitten.com/g/600/400" /></label><!--
     --><input type="radio" name="css3slideshow" id="slide4" /><!--
     --><label for="slide4"><img src="https://placekitten.com/g/603/400" /></label><!--
     --><input type="radio" name="css3slideshow" id="slide5" /><!--
     --><label for="slide5"><img src="https://placekitten.com/g/604/400" /></label> 
    </div>
</div>

<div id="license">
    <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Pure CSS slideshow</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://wojtekmaj.pl" property="cc:attributionName" rel="cc:attributionURL">Wojciech Maj</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.
</div>

JSFiddle

JSFiddle

You can read more about customizations and some technical limitations on my fiddle.

你可以在我的小提琴上阅读更多关于自定义和一些技术限制的信息。

回答by Wojciech Maj

Please check this link for CSS only carousel with Auto Play option in the beginning, Left Right navs buttons, nav dots, and resumes play when clicked on button...

请检查此链接以获取仅带有自动播放选项的 CSS 轮播选项、左右导航按钮、导航点和单击按钮时继续播放...

Demo Link - http://blog.puneets.in/2016/02/pure-responsive-css3-slider-with.html

演示链接 - http://blog.puneets.in/2016/02/pure-responsive-css3-slider-with.html

.csslider1 {
  display: inline-block;
  position: relative;
  max-width: 830px;
  
  width: 100%;
  margin-top: 10px;
 }
 .csslider1 > .cs_anchor {
  display: none;
 }
 .csslider1 > ul {
  position: relative;
  z-index: 1;
  font-size: 0;
  line-height: 0;
  margin: 0 auto;
  padding: 0;
  
  overflow: hidden;
  white-space: nowrap;
 }
 .csslider1 > ul > div {
  width: 100%;
  visibility: hidden;
  font-size: 0px;
  line-height: 0;
 }
 .csslider1 > ul > li.img img {
  width: 100%;
 }
 .csslider1 > ul > li.img {
  font-size: 0pt;
 }
 .csslider1 > ul > li {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 15px;
  font-size: initial;
  line-height: normal;
  white-space: normal;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
 }
 .csslider1 .cs_lnk{
  position: absolute;
  top: -9999px;
  left: -9999px;
  font-size: 0pt;
  opacity: 0;
  filter: alpha(opacity=0);
 }

 .csslider1 > ul > li.img,
 .csslider1 > .cs_arrowprev,
 .csslider1 > .cs_arrownext,
 .csslider1 > .cs_bullets,
 .csslider1 > .cs_play_pause {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 }.csslider1 > .cs_arrowprev,
 .csslider1 > .cs_arrownext {
  position: absolute;
  top: 50%;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  z-index: 5;
 }
 .csslider1 > .cs_arrowprev > label,
 .csslider1 > .cs_arrownext > label {
  position: absolute;

  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  z-index: -1;
 }
 .csslider1 > .cs_arrowprev {
  left: 0;
 }
 .csslider1 > .cs_arrownext {
  right: 0;
 }

 .csslider1 > .slide:checked ~ .cs_arrowprev > label,
 .csslider1 > .slide:checked ~ .cs_arrownext > label {
  opacity: 0;
  z-index: -1;
 }

 .csslider1 > #cs_slide1_0:checked ~ .cs_arrowprev > label.num2,
 .csslider1 > #cs_pause1_0:checked ~ .cs_arrowprev > label.num2,
 .csslider1 > #cs_slide1_0:checked ~ .cs_arrownext > label.num1,
 .csslider1 > #cs_pause1_0:checked ~ .cs_arrownext > label.num1, 
 .csslider1 > #cs_slide1_1:checked ~ .cs_arrowprev > label.num0,
 .csslider1 > #cs_pause1_1:checked ~ .cs_arrowprev > label.num0,
 .csslider1 > #cs_slide1_1:checked ~ .cs_arrownext > label.num2,
 .csslider1 > #cs_pause1_1:checked ~ .cs_arrownext > label.num2, 
 .csslider1 > #cs_slide1_2:checked ~ .cs_arrowprev > label.num1,
 .csslider1 > #cs_pause1_2:checked ~ .cs_arrowprev > label.num1,
 .csslider1 > #cs_slide1_2:checked ~ .cs_arrownext > label.num0,
 .csslider1 > #cs_pause1_2:checked ~ .cs_arrownext > label.num0 {
  opacity: 1;
  z-index: 5;
 }

 @-webkit-keyframes arrow {
  0%, 33.32333333333334% { opacity: 1; z-index: 5; }
  33.333333333333336%, 100% { opacity: 0; z-index: -1; }
 }
 @-moz-keyframes arrow {
  0%, 33.32333333333334% { opacity: 1; z-index: 5; }
  33.333333333333336%, 100% { opacity: 0; z-index: -1; }
 }
 @keyframes arrow {
  0%, 33.32333333333334% { opacity: 1; z-index: 5; }
  33.333333333333336%, 100% { opacity: 0; z-index: -1; }
 }


 .csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num2,
 .csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num1 {
  -webkit-animation: arrow 12300ms infinite -1000ms;
  -moz-animation: arrow 12300ms infinite -1000ms;
  animation: arrow 12300ms infinite -1000ms;
  
 }
 .csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num0,
 .csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num2 {
  -webkit-animation: arrow 12300ms infinite 3100ms;
  -moz-animation: arrow 12300ms infinite 3100ms;
  animation: arrow 12300ms infinite 3100ms;
  
 }
 .csslider1 > #cs_play1:checked ~ .cs_arrowprev > label.num1,
 .csslider1 > #cs_play1:checked ~ .cs_arrownext > label.num0 {
  -webkit-animation: arrow 12300ms infinite 7200ms;
  -moz-animation: arrow 12300ms infinite 7200ms;
  animation: arrow 12300ms infinite 7200ms;
  
 }

 .csslider1 > .slide:checked ~ .cs_arrowprev > label,
 .csslider1 > .slide:checked ~ .cs_arrownext > label,
 .csslider1 > .pause:checked ~ .cs_arrowprev > label,
 .csslider1 > .pause:checked ~ .cs_arrownext > label {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  -o-animation: none;
  animation: none;
 }

 .csslider1 > .cs_bullets {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 6;
  font-size: 0;
  line-height: 8pt;
  text-align: center;
 }
 .csslider1 > .cs_bullets > div {
  margin-left: -50%;
  width: 100%;
 }
 .csslider1 > .cs_bullets > label {
  position: relative;
  display: inline-block;
  cursor: pointer;
 }
 .csslider1 > .cs_bullets > label > .cs_thumb {
  visibility: hidden;
  position: absolute;
  opacity: 0;
  z-index: 1;
  line-height: 0;
  left: -55px;
  top: -48px;
 }
 .csslider1 > .cs_bullets > label > .cs_thumb > img {
  max-width: none;
 }
 .csslider1.cs_handle {
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAABwSURBVEjH7ZJBEsAgCAMT/v/n9NCOSqe2oD2yNx1JggB4BCEFWyFASP2KMQE7ywWhe/tTRGCGogLk02tFctiW/SUgaMyQG4PdPzDn31rQbMb8FiAXgvsEJNax1yVlVGAjA93apP3HFhZTGIqiKH7iADB6HxPlHdNVAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE0LTA3LTA3VDEzOjQ5OjEwKzAyOjAwm7WiFAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNC0wNy0wN1QxMzo0OToxMCswMjowMOroGqgAAAAASUVORK5CYII="), move;
 }
 .csslider1.cs_handle.cs_grab {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAABaSURBVEjH7ZMxCkAhDEOT8u9/5TpJ+xWkFse8IYutJgEB8RCHL1qCc90BEFnT6QH7mwgFHBUf8wJyS1TDLuc3vmighx37LZdIth3E5hKj9n6O0HRh+oJCiFcMxRUUDxR1CTMAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTQtMDctMDdUMTM6NDk6MzgrMDI6MDDqf+sOAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTA3LTA3VDEzOjQ5OjM4KzAyOjAwmyJTsgAAAABJRU5ErkJggg=="), move;
 }

 .csslider1 > ul > li.num0 {
  left: 0%;
 }
 .csslider1 > ul > li.num1 {
  left: 100%;
 }
 .csslider1 > ul > li.num2 {
  left: 200%;
 }

 .csslider1 > #cs_slide1_0:checked ~ ul > li,
 .csslider1 > #cs_pause1_0:checked ~ ul > li {
  -webkit-transform: translateX(0%);
  -moz-transform: translateX(0%);
  transform: translateX(0%);
  
 }
 .csslider1 > #cs_slide1_1:checked ~ ul > li,
 .csslider1 > #cs_pause1_1:checked ~ ul > li {
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  transform: translateX(-100%);
  
 }
 .csslider1 > #cs_slide1_2:checked ~ ul > li,
 .csslider1 > #cs_pause1_2:checked ~ ul > li {
  -webkit-transform: translateX(-200%);
  -moz-transform: translateX(-200%);
  transform: translateX(-200%);
  
 }

 .csslider1 > ul > li {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  opacity: 1;

  -webkit-transition: -webkit-transform 1000ms;
  -moz-transition: -moz-transform 1000ms;
  transition: transform 1000ms;
  

  
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
  
 }

 
 @-webkit-keyframes slide {
  0%, 25.203252032520325% { -webkit-transform: translateX(0%); }
  33.333333333333336%, 58.53658536585366% { -webkit-transform: translateX(-100%); }
  66.66666666666667%, 91.869918699187% { -webkit-transform: translateX(-200%); }
  
 }
 @-moz-keyframes slide {
  0%, 25.203252032520325% { -moz-transform: translateX(0%); }
  33.333333333333336%, 58.53658536585366% { -moz-transform: translateX(-100%); }
  66.66666666666667%, 91.869918699187% { -moz-transform: translateX(-200%); }
  
 }
 @keyframes slide {
  0%, 25.203252032520325% { transform: translateX(0%); }
  33.333333333333336%, 58.53658536585366% { transform: translateX(-100%); }
  66.66666666666667%, 91.869918699187% { transform: translateX(-200%); }
  
 }


 .csslider1  > #cs_play1:checked ~ ul > li {
  -webkit-animation: slide 12300ms infinite;
  -moz-animation: slide 12300ms infinite;
  animation: slide 12300ms infinite;
  
 }


 .csslider1 > #cs_play1:checked ~ ul > li,
 .csslider1 > .pause:checked ~ ul > li {
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
  
 }


 /* /calculate autoplay */
 .csslider1 > .cs_arrowprev,
 .csslider1 > .cs_arrownext {
  top: 0;
  bottom: 0;
  width: 15%;
  opacity: .5;
 }
 .csslider1 > .cs_arrowprev:hover,
 .csslider1 > .cs_arrownext:hover {
  opacity: .9;
 }
 .csslider1 > .cs_arrowprev {
  left: 0;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%);
  background-image: linear-gradient(to right, rgba(0,0,0,0.5) 0, rgba(0,0,0,0.0001) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
  background-repeat: repeat-x;
 }
 .csslider1 > .cs_arrownext {
  right: 0;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%);
  background-image: linear-gradient(to right, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.5) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
  background-repeat: repeat-x;
 }

 .csslider1 > .cs_arrowprev > label,
 .csslider1 > .cs_arrownext > label {
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
 }
 .csslider1 > .cs_arrowprev > label span,
 .csslider1 > .cs_arrownext > label span {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
 }
 .csslider1 > .cs_arrowprev > label span {
  float: left;
 }
 .csslider1 > .cs_arrownext > label span {
  float: right;
 }

 .csslider1 > .cs_arrowprev > label span:after,
 .csslider1 > .cs_arrownext > label span:after {
  display: block;
  position: absolute;
  width: 30px;
  height:30px;
  top: 50%;
  margin-top: -23px;
  color: #fff;
  text-align: center;
  content:'';
 }

 .csslider1 > .cs_arrowprev > label span:after {
     background: url('https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455161770.png');
     background-size:100% auto; 
 }
 .csslider1 > .cs_arrownext > label span:after {
     background: url('https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455161750.png');
  background-size:100% auto; 
 }
 .csslider1 > .cs_bullets {
  bottom: 20px;
  width: 70%;
  left: 15%;
 }
 .csslider1 > .cs_bullets > label {
  margin: 0 2px;
  padding: 5px;
  border-radius: 50%;
  background: transparent;
  -webkit-box-shadow: inset 0 0 0 1px #fff;
  box-shadow: inset 0 0 0 1px #fff; 
 }

 .csslider1 > .cs_bullets > label > .cs_thumb {
  border: 3px solid #fff;
  margin-top: -13px;
  -webkit-transition: opacity .3s, visibility .3s;
  -moz-transition: opacity .3s, visibility .3s;
  transition: opacity .3s, visibility .3s;
  
 }
 .csslider1 > .cs_bullets > label > .cs_thumb:before {
  content: '';
  position: absolute;
  width: 0; 
  height: 0; 
  left: 50%;
  margin-left: -5px;
  bottom: -10px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  
  border-top: 7px solid #fff;
 }
 .csslider1 > .cs_bullets > label:hover > .cs_thumb {
  opacity: 1;
  visibility: visible;
 }

 .csslider1 > #cs_slide1_0:checked ~ .cs_bullets > label.num0,
 .csslider1 > #cs_pause1_0:checked ~ .cs_bullets > label.num0,
 .csslider1 > #cs_slide1_1:checked ~ .cs_bullets > label.num1,
 .csslider1 > #cs_pause1_1:checked ~ .cs_bullets > label.num1,
 .csslider1 > #cs_slide1_2:checked ~ .cs_bullets > label.num2,
 .csslider1 > #cs_pause1_2:checked ~ .cs_bullets > label.num2 {
  background: #fff;
  padding: 6px;
  -webkit-box-shadow: none;
  box-shadow: none; 
 }

 @-webkit-keyframes bullet {
  0%, 33.32333333333334% {
   -webkit-box-shadow: none;
   background: #fff;
   padding: 6px;
  }
  33.333333333333336%, 100% {
   -webkit-box-shadow: inset 0 0 0 1px #fff;
   background: transparent;
   padding: 5px;
   margin-bottom: 0;
  }
 }
 @-moz-keyframes bullet {
  0%, 33.32333333333334% {
   -moz-box-shadow: none;
   background: #fff;
   padding: 6px;
  }
  33.333333333333336%, 100% {
   -moz-box-shadow: inset 0 0 0 1px #fff;
   background: transparent;
   padding: 5px;
   margin-bottom: 0;
  }
 }
 @keyframes bullet {
  0%, 33.32333333333334% {
   box-shadow: none;
   background: #fff;
   padding: 6px;
  }
  33.333333333333336%, 100% {
   box-shadow: inset 0 0 0 1px #fff;
   background: transparent;
   padding: 5px;
   margin-bottom: 0;
  }
 }

 .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num0 {
  -webkit-animation: bullet 12300ms infinite -1000ms;
  -moz-animation: bullet 12300ms infinite -1000ms;
  animation: bullet 12300ms infinite -1000ms;
  
 }
 .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num1 {
  -webkit-animation: bullet 12300ms infinite 3100ms;
  -moz-animation: bullet 12300ms infinite 3100ms;
  animation: bullet 12300ms infinite 3100ms;
  
 }
 .csslider1 > #cs_play1:checked ~ .cs_bullets > label.num2 {
  -webkit-animation: bullet 12300ms infinite 7200ms;
  -moz-animation: bullet 12300ms infinite 7200ms;
  animation: bullet 12300ms infinite 7200ms;
  
 }

 .csslider1 > #cs_play1:checked ~ .cs_bullets > label > .cs_point,
 .csslider1 > .pause:checked ~ .cs_bullets > label > .cs_point {
  -webkit-transition: none;
  -moz-transition: none;
  transition: none;
  
 }

 .csslider1 > .slide:checked ~ .cs_bullets > label > .cs_point,
 .csslider1 > .pause:checked ~ .cs_bullets > label > .cs_point {
  -webkit-animation: none;
  -moz-animation: none;
  -ms-animation: none;
  -o-animation: none;
  animation: none;
 }

 
 /* ------------- Play ------------- */
 .csslider1 > .cs_play_pause{display:block;}
 
 .csslider1 > .cs_play_pause {
   position: absolute;
   bottom: 0;
   right: 0;
   z-index: 5;
 }
 .csslider1 > .cs_play_pause > label {
   cursor: pointer;
 }
 .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause,
 .csslider1 > .slide:checked ~ .cs_play_pause > .cs_play,
 .csslider1 > .pause:checked ~ .cs_play_pause > .cs_play {
   display: block;
   z-index: 5;
 }
 .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_play,
 .csslider1 > .slide:checked ~ .cs_play_pause > .cs_pause,
 .csslider1 > .pause:checked ~ .cs_play_pause > .cs_pause {
   display: none;
   z-index: -1;
 }



 @-webkit-keyframes pauseChange {
   0%, 33.32333333333334% { opacity: 1; z-index: 5; }
   33.333333333333336%, 100%  { opacity: 0; z-index: -1; }
 }
 @keyframes pauseChange {
   0%, 33.32333333333334% { opacity: 1; z-index: 5; }
   33.333333333333336%, 100%  { opacity: 0; z-index: -1; }
 }


 .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num0 {
   opacity: 0;
   z-index: -1;
   -webkit-animation: pauseChange 10800ms infinite -1900ms;
   animation: pauseChange 10800ms infinite -1900ms;
 }
 .csslider1 > #cs_play1:checked ~ .cs_play_pause{display:none;}
 
 .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num1 {
   opacity: 0;
   z-index: -1;
   -webkit-animation: pauseChange 10800ms infinite 1700ms;
   animation: pauseChange 10800ms infinite 1700ms;
 }
 .csslider1 > #cs_play1:checked ~ .cs_play_pause > .cs_pause.num2 {
   opacity: 0;
   z-index: -1;
   -webkit-animation: pauseChange 10800ms infinite 5300ms;
   animation: pauseChange 10800ms infinite 5300ms;
 }


 .csslider1 > .slide:checked ~ .cs_play_pause > .cs_pause,
 .csslider1 > .pause:checked ~ .cs_play_pause > .cs_pause {
   -webkit-animation: none;
   animation: none;
 }

 /* ------------- Play Pause CSS ------------- */
 .csslider1{position:relative}
 .csslider1 > .slide:checked ~ .cs_play_pause > .cs_play{
     display: block;
     background: rgba(0,0,0,0.5);
     z-index: 5;
     color: #fff;
     padding: 5px;
     font-family: arial;
     font-size: 9px;
 }
 .csslider1 > .slide:checked ~ .cs_play_pause > .cs_play:hover{ background: rgba(0,0,0,1);}
 .csslider1 > .cs_play_pause {
     position: absolute;
     bottom: 0;
     z-index: 5;
     margin-right: 0;
     z-index: 111;
 }
<div class="csslider1 autoplay cs_handle" style="width:200px;">
        <input name="cs_anchor1" id="cs_slide1_0" type="radio" class="cs_anchor slide">
        <input name="cs_anchor1" id="cs_slide1_1" type="radio" class="cs_anchor slide">
        <input name="cs_anchor1" id="cs_slide1_2" type="radio" class="cs_anchor slide">
        <input name="cs_anchor1" id="cs_play1" type="radio" class="cs_anchor" checked="">
        <input name="cs_anchor1" id="cs_pause1_0" type="radio" class="cs_anchor pause">
        <input name="cs_anchor1" id="cs_pause1_1" type="radio" class="cs_anchor pause">
        <input name="cs_anchor1" id="cs_pause1_2" type="radio" class="cs_anchor pause">

        <ul>
            <div>
                <img src="https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455163105.png" style="width: 100%;">
            </div>
            <li class="num0 img">
                <a href="http://betaout.com" target="_blank">
                    <img src="https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455163105.png" alt="" title="">
                </a>
            </li>
            <li class="num1 img">
                <a href="http://betaout.com" target="_blank">
                    <img src="https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455163167.png" alt="" title="">
                </a>
            </li>
            <li class="num2 img">
                <a href="http://betaout.com" target="_blank">
                    <img src="https://s3.amazonaws.com/www.betaoutcdn.com/210522016/02/1455163189.png" alt="" title="">
                </a>
            </li>
        </ul>

 <div class="cs_play_pause">
  <label class="cs_play" for="cs_play1">Play</label> 
 </div>
 
        <div class="cs_arrowprev">
                <label class="num0" for="cs_slide1_0"><span><i></i></span></label>
                <label class="num1" for="cs_slide1_1"><span><i></i></span></label>
                <label class="num2" for="cs_slide1_2"><span><i></i></span></label>
        </div>
        <div class="cs_arrownext">
                <label class="num0" for="cs_slide1_0"><span><i></i></span></label>
                <label class="num1" for="cs_slide1_1"><span><i></i></span></label>
                <label class="num2" for="cs_slide1_2"><span><i></i></span></label>
        </div>

        <div class="cs_bullets">
                <label class="num0" for="cs_slide1_0">
                    <span class="cs_point"></span>
                </label>
                <label class="num1" for="cs_slide1_1">
                    <span class="cs_point"></span>
                </label>
                <label class="num2" for="cs_slide1_2">
                    <span class="cs_point"></span>
                </label>
        </div>
    </div>

回答by maioman

Extending royhowie's awesome solution by adding an animation property on img:

通过在 上添加动画属性来扩展 royhowie 的出色解决方案img：

div.wrap2 {
  float: left;
  height: 500px;
  width: 422px;
}
div.group input {
  display: none;
  left: -100%;
  position: absolute;
  top: -100%;
}
div.group input ~ div.content {
  border: solid 1px black;
  display: none;
  height: 350px;
  margin: 0px 60px;
  position: relative;
  width: 300px;
}
div.group input:checked ~ div.content {
  display: block;
}
div.group input:checked ~ div.content > img {
  display: block;
  -webkit-animation: opac 2s ease-in;
  animation: opac 2s ease-in;
}
@-webkit-keyframes opac {
  from { opacity: 0 }
  to { opacity: 1 }
}
@keyframes opac {
  from { opacity: 0 }
  to { opacity: 1 }
}
div.group input:checked ~ label.previous,
div.group input:checked ~ label.next {
  display: block;
  opacity: 1;
}
div.group label {
  background-color: #69c;
  border: solid 1px black;
  display: none;
  height: 50px;
  width: 50px;
}
img {
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
}
p {
  text-align: center;
}
label {
  font-size: 4em;
  margin: 125px 0 0 0;
}
label.previous {
  float: left;
  padding: 0 0 30px 5px;
}
label.next {
  float: right;
  padding: 0 5px 25px 0;
  text-align: right;
}
<div class="wrap">
  <div class="wrap2">
    <div class="group">
      <input type="radio" name="test" id="0" value="0">
      <label for="4" class="previous">&lt;</label>
      <label for="1" class="next">&gt;</label>
      <div class="content">
        <p>panel #0</p>
        <img src="http://i.stack.imgur.com/R5yzx.jpg" width="200" height="286">
      </div>
    </div>
    <div class="group">
      <input type="radio" name="test" id="1" value="1">
      <label for="0" class="previous">&lt;</label>
      <label for="2" class="next">&gt;</label>
      <div class="content">
        <p>panel #1</p>
        <img src="http://i.stack.imgur.com/k0Hsd.jpg" width="200" height="139">
      </div>
    </div>
    <div class="group">
      <input type="radio" name="test" id="2" value="2">
      <label for="1" class="previous">&lt;</label>
      <label for="3" class="next">&gt;</label>
      <div class="content">
        <p>panel #2</p>
        <img src="http://i.stack.imgur.com/Hhl9H.jpg" width="140" height="200">
      </div>
    </div>
    <div class="group">
      <input type="radio" name="test" id="3" value="3" checked="">
      <label for="2" class="previous">&lt;</label>
      <label for="4" class="next">&gt;</label>
      <div class="content">
        <p>panel #3</p>
        <img src="http://i.stack.imgur.com/r1AyN.jpg" width="200" height="287">
      </div>
    </div>
    <div class="group">
      <input type="radio" name="test" id="4" value="4">
      <label for="3" class="previous">&lt;</label>
      <label for="0" class="next">&gt;</label>
      <div class="content">
        <p>panel #4</p>
        <img src="http://i.stack.imgur.com/EHHsa.jpg" width="96" height="139">
      </div>
    </div>
  </div>
</div>

回答by Francisco Presencia

Why not making it smooth and nice looking with only CSS?

为什么不只用 CSS 让它变得流畅漂亮呢？

Picnic CSS 4.0 Tabs

野餐 CSS 4.0 标签

This is part of a library I created, Picnic CSS. However, that jsfiddle includes the library and all of the plugins for the nextversion (4.0 is being finished now). You can see the current 3.x version of the same plugin here, which also fulfills all of your requirements, but it's not so smooth as I'd like:

这是我创建的库Picnic CSS 的一部分。然而，那个 jsfiddle 包括库和下一个版本的所有插件（4.0 现在正在完成）。您可以在此处查看同一插件的当前 3.x 版本，它也满足您的所有要求，但并不像我希望的那样流畅：

Picnic CSS 3.x Tabs

野餐 CSS 3.x 标签

Right now you can only see the scss source code in the dev branchbut it is scheduled to be released in the following days, so I'll update my answer.

现在你只能在 dev 分支中看到scss 源代码，但它计划在接下来的几天发布，所以我会更新我的答案。

Some code please! This is the HTML that you need for the 4.0 version, as others commented, you basically play with <input type='radio'>and <label>to achieve the desired effect:

请一些代码！这是 4.0 版本所需的 HTML，正如其他人评论的那样，您基本上可以使用<input type='radio'>并<label>达到预期效果：

<div class="tabs three" style="text-align: center;">
  <input id='tabC-1' type='radio' name='tabgroupC' checked />
  <label class="pseudo button" for="tabC-1">1</label>
  ?
  <input id='tabC-2' type='radio' name='tabgroupC'>
  <label class="pseudo button" for="tabC-2">2</label>
  ?
  <input id='tabC-3' type='radio' name='tabgroupC'>
  <label class="pseudo button" for="tabC-3">3</label>
  <div class="row" style="text-align: left;">
    <div>
      <div class="card" style="margin: 10px 20px;">
        <header>
          <h3>Super important notice!</h3>
        </header>
        <p>Thank you for registering! By doing so you agree to the <a href="#">Terms and conditions</a></p>
        <footer>
          <label class="button" for="tabC-2">Agree</label>
        </footer>
      </div>
    </div>

    <div>
      <div class="card" style="margin: 10px 20px;">
        <header>
          <h3>Your basic data</h3>
        </header>
        <section>
          <input type="text" placeholder="Full Name">
        </section>
        <section>
          <div class="select">
            <select>
              <option>Where did you find us?</option>
              <option>Facebook</option>
              <option>Twitter</option>
              <option>Linkedin</option>
            </select>
          </div>
        </section>
        <footer>
          <label class="button" for="tabC-3">Next</label>
          <label class="button dangerous" for="tabC-1">Back</label>
        </footer>
      </div>
    </div>

    <div>
      <div class="card" style="margin: 10px 20px;">
        <header>
          <h3>Create account</h3>
        </header>
        <section>
          <input type="email" placeholder="Email">
        </section>
        <section>
          <input type="password" placeholder="Password">
        </section>
        <footer>
          <button class="success">Finish!</button>
          <label class="button dangerous" for="tabC-2">Back</label>
        </footer>
      </div>
    </div>
  </div>
</div>

相关推荐

javascript 如何以角度验证日期格式

javascript 如何以角度验证日期格式

javascript $watchGroup 与 $watchCollection？

javascript $watchGroup 与 $watchCollection？

javascript 如何将对象数组转换为 Lodash 中的对象？

javascript 如何将对象数组转换为 Lodash 中的对象？

javascript Angular UI-Router 一种状态下的更多可选参数

javascript Angular UI-Router 一种状态下的更多可选参数

相关推荐
最近更新
标签