html - 如何在不摆脱手动按钮转换的情况下摆脱 CSS 幻灯片中的多余空白？

Question

我有一个纯 CSS3 制作的幻灯片。它将只保留 CSS，根本没有 JS。它会在 5 秒后自动滑动(使用动画)，在它持有的两个图像之间来回移动。用户还可以手动单击按钮以产生幻灯片(使用转换)。两个图像的 div 与它们一样长。我的问题是，如果幻灯片自动滑动到第二张图片并且用户单击第二张图片的按钮，它会再次滑动到没有图片的空白区域。在自动滑动到第二张图片后，如何阻止它在点击第二张图片按钮时再次滑动？

CSS:

.slideshowcontainer {
    width: 800px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    text-align: center;
    overflow: hidden;
    position: relative;
    top: 30px;
    border-style: solid;
    border-width: 10px;
    border-color: white;
    border-radius: 15px;
}

.imagecontainer {
    width: 1800px;
    height: 400px;
    clear: both;
    position: relative;
    -webkit-transition: left 3s;
    -moz-transition: left 3s;
    -o-transition: left 3s;
    -ms-transition: left 3s;
    transition: left 3s;
    animation: scroller 16s infinite;
}

@keyframes scroller {
    0% {
        transform: translateX(0);
    }
    31.25% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-800px);
    }
    81.25% {
        transform: translateX(-800px);
    }
    100% {
        transform: translateX(0);
    }
}

.slideshowimage {
    float: left;
    margin: 0px;
    padding: 0px;
    position: relative;
}


#slideshowimage-1:target ~ .imagecontainer {
animation: none;
transform: translateX(0px);
}

#slideshowimage-2:target ~ .imagecontainer {
animation: none;
transform: translateX(-800px);
}

.buttoncontainer {
    position: relative;
    top: -20px;
}

.button {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 10px;
    background-color: darkgray;
    -webkit-transition: background-color 0.25s;
    -moz-transition: background-color 0.25s;
    -o-transition: background-color 0.25s;
    -ms-transition: background-color 0.25s;
    transition: background-color 0.25s;
}

.button:hover {
    background-color: gray;
}

HTML:

<div class="slideshowcontainer">
    <span id="slideshowimage-1"></span>
    <span id="slideshowimage-2"></span>
    <span id="slideshowimage-3"></span>
        <div class="imagecontainer">
            <a href="#"><img src="WebServiceSlide.png" class="slideshowimage" style="width:800px;height:400px;"></a>
            <a href="#"><img src="es-flag.png" class="slideshowimage" style="width:800px;height:400px;"></a>
        </div>
        <div class="buttoncontainer">
            <a href="#slideshowimage-1" class="button"></a>
            <a href="#slideshowimage-2" class="button"></a>
        </div>
    </div>

Answer 1

点击按钮时，您已关闭动画并进行翻译

我已经添加了代码片段

.slideshowcontainer {
    width: 800px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    text-align: center;
    overflow: hidden;
    position: relative;
    top: 30px;
    border-style: solid;
    border-width: 10px;
    border-color: white;
    border-radius: 15px;
}

.imagecontainer {
    width: 1800px;
    height: 400px;
    clear: both;
    position: relative;
    -webkit-transition: all 3s;
    -moz-transition: all 3s;
    -o-transition: all 3s;
    -ms-transition: all 3s;
    transition: all 3s;
    transform: translateX(0px);
    animation: scroller 16s infinite;
}

@keyframes scroller {
    0% {
        transform: translateX(0);
    }
    31.25% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-800px);
    }
    81.25% {
        transform: translateX(-800px);
    }
    100% {
        transform: translateX(0);
    }
}

.slideshowimage {
    float: left;
    margin: 0px;
    padding: 0px;
    position: relative;
}

#slideshowimage-1:target ~ .imagecontainer {
    animation: none;
    transform: translateX(0px);
}

#slideshowimage-2:target ~ .imagecontainer {
    animation: none;
    transform: translateX(-800px);
}

.buttoncontainer {
    position: relative;
    top: -20px;
}

.button {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 10px;
    background-color: darkgray;
    -webkit-transition: background-color 0.25s;
    -moz-transition: background-color 0.25s;
    -o-transition: background-color 0.25s;
    -ms-transition: background-color 0.25s;
    transition: background-color 0.25s;
}

.button:hover {
    background-color: gray;
}

<div class="slideshowcontainer">
    <span id="slideshowimage-1"></span>
    <span id="slideshowimage-2"></span>
    <span id="slideshowimage-3"></span>
        <div class="imagecontainer">
            <a href="#"><img src="https://www.internetcreation.net/wp-content/uploads/2015/04/banner-web-design.png" class="slideshowimage" style="width:800px;height:400px;"></a>
            <a href="#"><img src="http://23k8dv4brsbv18vf5lh7gb21.wpengine.netdna-cdn.com/wp-content/uploads/2015/04/banner-web-development.png" class="slideshowimage" style="width:800px;height:400px;"></a>
        </div>
        <div class="buttoncontainer">
            <a href="#slideshowimage-1" class="button"></a>
            <a href="#slideshowimage-2" class="button"></a>
        </div>
    </div>