使用css javascript添加滑动节目

Question

我想要一个自动幻灯片放映（每张照片6张），但单选按钮会同时移动。我不确定如何使用CSS动画构建它。这是我到目前为止所得到的：

Codepen：http://codepen.io/damianocel/pen/rLGmBb

    [data-am-gallery] {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #fff;
    }

    [data-am-gallery] .image {
        animation: imageAnimation 30s linear infinite 0s;
        backface-visibility: hidden;

        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        opacity: 0;
        -webkit-transition: opacity 1000ms ease;
        transition: opacity 1000ms ease;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }


    [data-am-gallery] input[type="radio"] {
        position: fixed;
        top: -9999px;
    }

    [data-am-gallery] input[type="radio"]:checked { /* This loop handles the image switching and dot active state */
    }

    [data-am-gallery] input[type="radio"]:checked:nth-child(5) ~ .images .image:nth-child(5) { opacity: 1; }

    [data-am-gallery] input[type="radio"]:checked:nth-child(5) ~ .navigation .dot:nth-child(5) { background-color: coral; }

    [data-am-gallery] input[type="radio"]:checked:nth-child(5) ~ .navigation .dot:nth-child(5):hover { opacity: 1; }

    [data-am-gallery] input[type="radio"]:checked:nth-child(4) ~ .images .image:nth-child(4) { opacity: 1; }

    [data-am-gallery] input[type="radio"]:checked:nth-child(4) ~ .navigation .dot:nth-child(4) { background-color: coral; }

    [data-am-gallery] input[type="radio"]:checked:nth-child(4) ~ .navigation .dot:nth-child(4):hover { opacity: 1; }

    [data-am-gallery] input[type="radio"]:checked:nth-child(3) ~ .images .image:nth-child(3) { opacity: 1; }

    [data-am-gallery] input[type="radio"]:checked:nth-child(3) ~ .navigation .dot:nth-child(3) { background-color: coral; }

    [data-am-gallery] input[type="radio"]:checked:nth-child(3) ~ .navigation .dot:nth-child(3):hover { opacity: 1; }

    [data-am-gallery] input[type="radio"]:checked:nth-child(2) ~ .images .image:nth-child(2) { opacity: 1; }

    [data-am-gallery] input[type="radio"]:checked:nth-child(2) ~ .navigation .dot:nth-child(2) { background-color: coral; }

    [data-am-gallery] input[type="radio"]:checked:nth-child(2) ~ .navigation .dot:nth-child(2):hover { opacity: 1; }

    [data-am-gallery] input[type="radio"]:checked:nth-child(1) ~ .images .image:nth-child(1) { opacity: 1; }

    [data-am-gallery] input[type="radio"]:checked:nth-child(1) ~ .navigation .dot:nth-child(1) { background-color: coral; }

    [data-am-gallery] input[type="radio"]:checked:nth-child(1) ~ .navigation .dot:nth-child(1):hover { opacity: 1; }

    [data-am-gallery] .navigation {

        position: absolute;
        bottom: 15px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    [data-am-gallery] .dot {
        display: inline-block;
        width: 15px;
        height: 15px;
        margin: 0 2px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.8);
        cursor: pointer;
        -webkit-transition: opacity 200ms ease;
        transition: opacity 200ms ease;
    }

    [data-am-gallery] .dot:hover { opacity: 0.8; }

    [data-am-gallery] .prev, [data-am-gallery] .next {
        position: absolute;
        display: none;
        top: 0;
        bottom: 0;
        width: 100px;
        cursor: pointer;
        -webkit-transition: all 200ms ease;
        transition: all 200ms ease;
        font-family: sans-serif;
    }

    [data-am-gallery] .prev:before, [data-am-gallery] .next:before {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        font-size: 3vw;
        color: rgba(255, 255, 255, 0.5);
    }

    [data-am-gallery] .prev:hover, [data-am-gallery] .next:hover { background-color: rgba(255, 255, 255, 0.1); }

    [data-am-gallery] .prev {
        left: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    [data-am-gallery] .prev:before { content: "❮"; }

    [data-am-gallery] .next {
        right: 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    [data-am-gallery] .next:before { content: "❯"; }

    [data-am-gallery]:hover .prev {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    [data-am-gallery]:hover .next {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    /* Gallery Modifiers (number of images) */
    /*
    Loop to generate modifiers on [data-am-gallery] for number of images (up to $max-images).
    This is required to handle the prev and next buttons.

    The slideshow will still function without a modifier set, but will lose it's prev and next buttons functionlity.
    */

    [data-am-gallery~="5"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(5) ~ .prev-container .prev:nth-child(4) { display: block; }

    [data-am-gallery~="5"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(5) ~ .next-container .next:nth-child(1) { display: block; }

    [data-am-gallery~="5"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(4) ~ .prev-container .prev:nth-child(3) { display: block; }

    [data-am-gallery~="5"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(4) ~ .next-container .next:nth-child(5) { display: block; }

    [data-am-gallery~="5"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(3) ~ .prev-container .prev:nth-child(2) { display: block; }

    [data-am-gallery~="5"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(3) ~ .next-container .next:nth-child(4) { display: block; }

    [data-am-gallery~="5"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(2) ~ .prev-container .prev:nth-child(1) { display: block; }

    [data-am-gallery~="5"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(2) ~ .next-container .next:nth-child(3) { display: block; }

    [data-am-gallery~="5"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(1) ~ .prev-container .prev:nth-child(5) { display: block; }

    [data-am-gallery~="5"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(1) ~ .next-container .next:nth-child(2) { display: block; }

    [data-am-gallery~="4"] input[type="radio"]:nth-child(5), [data-am-gallery~="4"] .navigation .dot:nth-child(5), [data-am-gallery~="4"] .image:nth-child(5) { display: none !important; }

    [data-am-gallery~="4"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(4) ~ .prev-container .prev:nth-child(3) { display: block; }

    [data-am-gallery~="4"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(4) ~ .next-container .next:nth-child(1) { display: block; }

    [data-am-gallery~="4"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(3) ~ .prev-container .prev:nth-child(2) { display: block; }

    [data-am-gallery~="4"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(3) ~ .next-container .next:nth-child(4) { display: block; }

    [data-am-gallery~="4"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(2) ~ .prev-container .prev:nth-child(1) { display: block; }

    [data-am-gallery~="4"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(2) ~ .next-container .next:nth-child(3) { display: block; }

    [data-am-gallery~="4"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(1) ~ .prev-container .prev:nth-child(4) { display: block; }

    [data-am-gallery~="4"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(1) ~ .next-container .next:nth-child(2) { display: block; }

    [data-am-gallery~="3"] input[type="radio"]:nth-child(5), [data-am-gallery~="3"] .navigation .dot:nth-child(5), [data-am-gallery~="3"] .image:nth-child(5) { display: none !important; }

    [data-am-gallery~="3"] input[type="radio"]:nth-child(4), [data-am-gallery~="3"] .navigation .dot:nth-child(4), [data-am-gallery~="3"] .image:nth-child(4) { display: none !important; }

    [data-am-gallery~="3"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(3) ~ .prev-container .prev:nth-child(2) { display: block; }

    [data-am-gallery~="3"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(3) ~ .next-container .next:nth-child(1) { display: block; }

    [data-am-gallery~="3"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(2) ~ .prev-container .prev:nth-child(1) { display: block; }

    [data-am-gallery~="3"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(2) ~ .next-container .next:nth-child(3) { display: block; }

    [data-am-gallery~="3"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(1) ~ .prev-container .prev:nth-child(3) { display: block; }

    [data-am-gallery~="3"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(1) ~ .next-container .next:nth-child(2) { display: block; }

    [data-am-gallery~="2"] input[type="radio"]:nth-child(5), [data-am-gallery~="2"] .navigation .dot:nth-child(5), [data-am-gallery~="2"] .image:nth-child(5) { display: none !important; }

    [data-am-gallery~="2"] input[type="radio"]:nth-child(4), [data-am-gallery~="2"] .navigation .dot:nth-child(4), [data-am-gallery~="2"] .image:nth-child(4) { display: none !important; }

    [data-am-gallery~="2"] input[type="radio"]:nth-child(3), [data-am-gallery~="2"] .navigation .dot:nth-child(3), [data-am-gallery~="2"] .image:nth-child(3) { display: none !important; }

    [data-am-gallery~="2"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(2) ~ .prev-container .prev:nth-child(1) { display: block; }

    [data-am-gallery~="2"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(2) ~ .next-container .next:nth-child(1) { display: block; }

    [data-am-gallery~="2"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(1) ~ .prev-container .prev:nth-child(2) { display: block; }

    [data-am-gallery~="2"][data-am-gallery~="next-prev-navigation"] input[type="radio"]:checked:nth-child(1) ~ .next-container .next:nth-child(2) { display: block; }

    [data-am-gallery~="1"] .navigation { display: none; }

    /* Base Styling */

    body { margin: 0; }

    .container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }





<div class="container">
<div data-am-gallery="3 next-prev-navigation">

    <!-- Radio -->
    <input type="radio" name="gallery" value="img-1" id="img-1" checked />
    <input type="radio" name="gallery" value="img-2" id="img-2" />
    <input type="radio" name="gallery" value="img-3" id="img-3" />

    <!-- Images -->
    <div class="images">
        <div class="image" style="background-image: url(https://unsplash.it/2550/1800?image=1064);">
        <!-- Add content to images (sample) -->
            <!--<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-family: sans-serif; text-align: center; text-shadow: 0 0 20px rgba(0,0,0,0.5);">-->
                <!--&lt;!&ndash;<h1 style="margin-top: 0; margin-bottom: 0.8vw; font-size: 5vw; font-weight: bold;">Pure CSS Slideshow</h1>&ndash;&gt;-->
            <!--</div>-->
        </div>
        <div class="image" style="background-image: url(https://unsplash.it/2550/1800?image=1063);"></div>
        <div  id="image3" class="image" style="background-image: url(https://unsplash.it/2550/1800?image=1060);"></div>
    </div>




    <!--<div class="crossfade">-->
        <!--<figure></figure>-->
        <!--<figure></figure>-->
        <!--<figure></figure>-->
        <!--<figure></figure>-->
        <!--<figure></figure>-->

        <!--&lt;!&ndash; Radio &ndash;&gt;-->
        <!--<input type="radio" name="gallery" id="image-1" checked />-->
        <!--<input type="radio" name="gallery" id="image-2" />-->
        <!--<input type="radio" name="gallery" id="image-3" />-->

    <!--</div>-->




    <!-- Navigation -->
    <div class="navigation">
        <label class="dot" for="img-1"></label>
        <label class="dot" for="img-2"></label>
        <label class="dot" for="img-3"></label>
    </div>

    <!-- Prev next navigation -->
    <div class="prev-container">
        <label class="prev" for="img-1"></label>
        <label class="prev" for="img-2"></label>
        <label class="prev" for="img-3"></label>
    </div>
    <div class="next-container">
        <label class="next" for="img-1"></label>
        <label class="next" for="img-2"></label>
        <label class="next" for="img-3"></label>
    </div>
</div>

Answer 1

可能不是您正在寻找的答案，但值得一试，请查看此视频HTML: Slide show easiest way

Answer 2

您可以使用JavaScript轻松构建它，每6秒更改一次图像的src。 我在打电话，但如果你有兴趣，我可以稍后再写。