タイトル通りですが、
CSSで複数の画像を、自動で切り替えて表示し
それを繰り返されるようにたいです><
1週目はうまくいくのですが、
最後の画像までいくと止まってしまい
しばらくして4番目の画像と5番目が繰り返される
という状態です、、、
どうすれば良いでしょうか。。><
超初心者で、
コードが汚く見にくいかもしれません。
すみません。
該当のソースコード
html
1<div class="photos"> 2 <img src="img/slide01.jpg" width="1206px" height="804px" alt="img01"> 3 <img src="img/slide03.jpg" width="1206px" height="804px" alt="img03"> 4 <img src="img/slide05.jpg" width="1206px" height="804px" alt="img05"> 5 <img src="img/slide07.jpg" width="1206px" height="804px" alt="img07"> 6 <img src="img/slide08.jpg" width="1206px" height="804px" alt="img08"> 7 </div>
css
1.photos{ 2 position: relative; 3} 4 5.photos img{ 6 position: absolute; 7 left: 0; 8 right: 0; 9 margin: 30px auto; 10 animation: photo 25s infinite; 11 opacity: 0; 12} 13 14@keyframes photo{ 15 0%{ opacity: 0;} 16 15%{ opacity: 1;} 17 85%{ opacity: 1;} 18 100%{ opacity: 0;} 19} 20 21.photos img:nth-of-type(1) { 22 animation-delay: 0s; 23} 24.photos img:nth-of-type(2) { 25 animation-delay: 5s; 26} 27.photos img:nth-of-type(3) { 28 animation-delay: 10s; 29} 30.photos img:nth-of-type(4) { 31 animation-delay: 15s; 32} 33.photos img:nth-of-type(5) { 34 animation-delay: 20s; 35}
回答1件
あなたの回答
tips
プレビュー