簡體   English   中英

如何自動播放此純CSS3幻燈片?

[英]How can I autoplay this pure CSS3 slideshow?

更新:問題出在這里(請參閱當前CSS),一旦最后一幅(第二幅)圖像出現,動畫回到第一幅圖像就立即發生而沒有延遲。 我希望動畫對第二個圖像的延遲相同,然后又應用於第一個圖像,而不是直接回到第一個圖像(在translationX(0)處)。

我有一個幻燈片,如下面的代碼所示:

 .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:1600px; 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 { left:0px; } #slideshowimage-2:target ~ .imagecontainer { left:-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; } 

此外,我想問問是否有人知道為什么,當我在加載頁面上單擊下一張圖像的按鈕時,該圖像沒有過渡顯示。 缺少轉換只會在第一次點擊時發生。

您需要在動畫關鍵幀上進行一些計算

例如,由於您有2張圖像,並且希望每張圖像顯示5秒鍾,並且一張幻燈片到另一張幻燈片的幻燈片應持續1秒鍾,因此總共需要12秒鍾。 所以使用animation:scroller 12s;

對於實際的關鍵幀,每秒是動畫的100%/ 12 = 8.33%。

@keyframes scroller {
    0% {transform:translateX(0);}
    41.6% {transform:translateX(0);} /*wait from 0% to 41%, which is 5 seconds*/
    50% {transform:translateX(-800px);} /*slide for 1 second*/
    91.6% {transform:translateX(-800px);} /*wait 5 seconds*/
    100% {transform:translateX(0);} /* slide back for 1 second*/
}

 .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:1600px; 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 12s; } @keyframes scroller { 0% {transform:translateX(0);} 41.6% {transform:translateX(0);} /*41% of 12seconds is 5second*/ 50% {transform:translateX(-800px);} /*slide for 1 second*/ 91.6% {transform:translateX(-800px);} /*wait 5 seconds*/ 100% {transform:translateX(0);} /* slide back for 1 second*/ } .slideshowimage { float:left; margin:0px; padding:0px; position:relative; } #slideshowimage-1:target ~ .imagecontainer { left:0px; } #slideshowimage-2:target ~ .imagecontainer { left:-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"> <img src="https://placehold.it/800x400" class="slideshowimage" style="width:800px;height:400px;"> <img src="https://placehold.it/800x400" class="slideshowimage" style="width:800px;height:400px;"> </div> <div class="buttoncontainer"> <a href="#slideshowimage-1" class="button"></a> <a href="#slideshowimage-2" class="button"></a> </div> </div> 


如果您想讓自動滑行永遠持續下去,請使用animation:scroller 12s infinite;

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM