背景に画像があるウェブサイトがあり、右から左に移動させたいと思っています。jQueryを使用したくないので、その移動を行うコードを次に示します
HTML コード
<div id="clouds_image"></div>
Javascript コード
var g = 0;
var speed=80;
var counter = 5;
function rollClouds()
{
document.getElementById('clouds_image').style.backgroundPosition=g+'px 0';
g--;
if (counter < 1)
clearInterval(interval);
}
interval = setInterval( function(){ rollClouds() }, speed)
これは、画像を右から左に移動させ、その移動を5回繰り返し、5から0までカウントダウンすることになっているため、停止counter < 1
するために実行されます。clearInterval(interval)
しかし、なぜそれが止まらずに繰り返されるのかわかりません! そのため、コードにエラーがある可能性があるため、動きを5回繰り返した後に停止させる方法を考えてください。〜ありがとう