お世話になります。
今回はjQueryを用いて画像を永久的に繰り返すコードを考えました。
HTML
<div id="back_img"></div>
CSS
#back_img{ width: 100%; height: 100%; z-index: 1; position: absolute; top: 0; margin-top: 0; background-image: url(img/IMG_0193_preview.jpg); background-position: center; background-size: cover; }
jQuery
setInterval(function(){ $('#back_img').css('background-image','url(img/IMG_0193_preview.jpg)'); setTimeout(function(){ $('#back_img').animate({backgroundImage:'url(img/IMG_0958.jpg)'},1000); },1000); setTimeout(function(){ $('#back_img').animate({backgroundImage:'url(img/IMG_0193_preview.jpg)'},1000); },1000); setTimeout(function(){ $('#back_img').animate({backgroundImage:'url(img/IMG_0958.jpg)'},1000); },1000); setTimeout(function(){ $('#back_img').animate({backgroundImage:'url(img/IMG_0193_preview.jpg)'},1000); },1000); setTimeout(function(){ $('#back_img').animate({backgroundImage:'url(img/IMG_0958.jpg)'},1000); },1000); },6000);
やりたいこととしては、6秒間の繰り返しのなかで画像を1秒ごとにbackground-imageを用いて変化させていくということを行いたいと考えましたがうまく動作しません。
解決案はありますでしょうか。よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。