0
Naren Muraliの助けを借りて、わずか14のデモに基づいて14枚の画像を修正することができたCSSスクロールスライドショーのコードがあります。唯一の問題は、最初と最後の画像が同じになるようにキーフレームアニメーションを変更する方法がわからないため、ショーの最後から次の繰り返しにシームレスに移行することです。CSSを使用したスクロールスライドショーバナーでのシームレスループ
誰かがこれを達成する方法を私に説明することができれば、私はとても感謝しています。
ありがとうございます。
html {
background-color: white;
}
body {
width: 1300px;
\t margin: 0 auto 0;
}
#container {
\t width: 500px;
\t overflow: hidden;
\t margin: 50px auto;
\t background: white;
}
.photobanner {
height: 270px;
width: 6748px;
margin-bottom: 80px;
font-size:0px;
}
img{
margin-right:2px;
}
.flex-container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-top: 30px;
}
.first {
\t -webkit-animation: bannermove 60s linear infinite;
\t -moz-animation: bannermove 60s linear infinite;
\t -ms-animation: bannermove 60s linear infinite;
\t -o-animation: bannermove 60s linear infinite;
\t animation: bannermove 60s linear infinite;
}
@keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -6268px;
}
}
@-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -6268px;
}
}
@-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -6268px;
}
}
@-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -6268px;
}
}
@-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -6268px;
}
}
img{
margin-right:2px;
}<header>
</header>
<section class="flex-container">
<div id="container">
<!-- Each image is 480px by 270px -->
<div class="photobanner">
\t <img class="first" src="https://www.bartonlewis.com/_imagesfilm/scroll_blue.jpg" alt="blue" />
<img src="https://www.bartonlewis.com/_imagesfilm/scroll_23rd_st.jpg" alt="23rd st" />
<img src="https://www.bartonlewis.com/_imagesfilm/scroll_broken_guru.jpg" alt="broken guru" />
<img src="https://www.bartonlewis.com/_imagesfilm/scroll_church_ave.jpg" alt="church ave" />
<img src="https://www.bartonlewis.com/_imagesfilm/scroll_nose.jpg" alt="nose" />
<img src="https://www.bartonlewis.com/_imagesfilm/scroll_pants.jpg" alt="pants" />
<img src="https://www.bartonlewis.com/_imagesfilm/scroll_i_will_miss_you.jpg" alt="i will miss you" />
<img src="https://www.bartonlewis.com/_imagesfilm/scroll_network_reality_stars.jpg" alt="network reality all stars" />
<img src="https://www.bartonlewis.com/_imagesfilm/scroll_kline.jpg" alt="kline" />
<img src="https://www.bartonlewis.com/_imagesfilm/scroll_queen.jpg" alt="queen" />
<img src="https://www.bartonlewis.com/_imagesfilm/scroll_water.jpg" alt="water" />
<img src="https://www.bartonlewis.com/_imagesfilm/scroll_swirls.jpg" alt="swirls" />
<img src="https://www.bartonlewis.com/_imagesfilm/scroll_robins_egg.jpg" alt="robins egg" />
<img src="https://www.bartonlewis.com/_imagesfilm/scroll_ports.jpg" alt="ports" />
</div>
</div>
</section>
ヒント：@ keyframesのベンダープレフィックスはもう必要ありません。 – Dai
別のヒント： 'photobanner'コンテナに' display：flex'（ラッピングなし）を使用する場合は、絶対幅を設定する必要はないので、CSSを編集することなく新しい項目を追加できます。 – Dai
ヒントありがとうございます。サイクルが完了したときに最終イメージをどのように最初のイメージにシームレスに移動するかについての洞察があれば、私はそれを感謝します。デモでは、作者は6つの画像を持っていて、最初の4つの繰り返しを行います。彼は、これが「フレームを満たすのに十分な画像を繰り返す」ことを容易にすると言います。これにより、「最初のフレームが最後のフレームと完全に一致する」ことが可能になる。私は指標を理解していないので、プロセスを複製することはできません。おそらく、このようにhtmlを書くのは、ショーの長さ、おそらくはキーフレームの余白の左の値と結びついています。どんな洞察もありがとう。 –