为什么第一次幻灯片显示图像点击跳过过渡，直接进入图像

Question

在下面的幻灯片中，有两张图片。一旦在第一次打开我的页面后点击第二个图像的按钮，就会突然跳转到该图像，没有预期的5秒过渡。此外，在这样做时，我注意到单击该图像的按钮后，#slideshowimage-2显示在url中(脱机执行此操作)。下面是代码:

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;
}

@keyframes change {
0% {
    transform: translateX(-800px);
}
100% {
    transform: translateX(0);
    animation: scroller 16s infinite;
}
}
@keyframes change2 {
0% {
    transform: translateX(0);
}
100% {
    transform: translateX(-800px);
    animation: scroller2 16s infinite;
}
}

#slideshowimage-1:target ~ .imagecontainer {
animation: none;
transform: translateX(0px);
animation: change 3s forwards;
}
#slideshowimage-2:target ~ .imagecontainer {
animation: none;
transform: translateX(-800px);
animation: change2 3s forwards;
}

.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

原因:-

因为left和translateX都不同。如果在幻灯片位于translateX(-800px)(第二张幻灯片)时应用left:-800px，则动画将在幻灯片的第二部分继续。这就是为什么你会看到一个空白的空间(当translateX(-800px)已经是left:-800px的时候)。

解决方案:-

您必须使用translateX或left。

解决问题的部分代码:-

@keyframes change {
    0% {
        transform: translateX(-800px);
    }
    100% {
        transform: translateX(0);
        animation: scroller 16s infinite;
    }
}
@keyframes change2 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-800px);
        animation: scroller2 16s infinite;
    }
}
#slideshowimage-1:target ~ .imagecontainer {
    animation: none;
    transform: translateX(0px);
    animation: change 3s forwards;
}
#slideshowimage-2:target ~ .imagecontainer {
    animation: none;
    transform: translateX(-800px);
    animation: change2 3s forwards;
}

解释

: -

此代码不手动执行translateX。相反，它使用动画通过animation: change 3s forwards;

滚动一次

缺点:-

当我们点击幻灯片选择按钮时，动画停止。我甚至尝试过通过在change关键帧动画结束部分添加动画来解决它。但不幸的是，它没有起作用。因此，我建议一种替代方法来克服这个缺点，如下所示

为了克服这个缺点，我添加了一个播放按钮会重放被幻灯片暂停的幻灯片播放动画吗按钮。(当我们点击播放按钮时，滑动需要一点时间正如我们在动画中给出的16秒一样)

演示

: -

.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);
    }
}
@keyframes scroller2 {
    0% {
        transform: translateX(-800px);
    }
    31.25% {
        transform: translateX(-800px);
    }
    50% {
        transform: translateX(0);
    }
    81.25% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-800px);
    }
}
@keyframes change {
    0% {
        transform: translateX(-800px);
    }
    100% {
        transform: translateX(0);
        animation: scroller 16s infinite;
    }
}
@keyframes change2 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-800px);
        animation: scroller2 16s infinite;
    }
}
.slideshowimage {
    float: left;
    margin: 0px;
    padding: 0px;
    position: relative;
}
#slideshowimage-1:target ~ .imagecontainer {
    animation: none;
    transform: translateX(0px);
    animation: change 3s forwards;
}
#slideshowimage-2:target ~ .imagecontainer {
    animation: none;
    transform: translateX(-800px);
    animation: change2 3s forwards;
}
#slideshowimage-3:target ~ .imagecontainer {
    transform: translateX(0);
    animation: scroller 16s infinite;
}
.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;
}
.buttonplay:after {
    height: 0;
    width: 0;
    top: 0;
    margin-left: 10px;
    position: absolute;
    content: ' ';
    border-left: solid 13px darkgray;
    border-top: solid 8px transparent;
    border-bottom: solid 8px transparent;
    }

<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://placehold.it/800x400" class="slideshowimage" style="width:800px;height:400px;"></a>
            <a href="#"><img src="https://placehold.it/900x450" 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>
            <a href="#slideshowimage-3" class="buttonplay"></a>
        </div>
    </div>