为什么第一张幻灯片图像点击跳过转换并直接转到图像？

Question

在下面显示的幻灯片中，有两个可用的图像。在第一次打开我的页面后单击第二个图像的按钮后，突然跳转到该图像，没有按预期的5秒转换。此外，在执行此操作时，我注意到在单击该图像的按钮后，URL中显示#slideshowimage-2（执行此脱机操作）。这是下面的代码：

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都不同。如果您在幻灯片位于left:-800px（第二张幻灯片）时应用translateX(-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关键帧动画结束部分添加动画来解决它。但不幸的是它没有用。所以我建议另一种方法来克服以下缺点

  

为了克服这个缺点，我添加了一个播放按钮   将重播幻灯片暂停的幻灯片动画   按钮。 （一旦我们点击播放按钮，它需要一点时间才能滑动   因为我们在动画中给出了16s）

<强>样本： -

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;