JavaScriptでクレイアニメ。ちらつきます。
JavaScript初心者です。Windows７とGoogleChromeを主に使っています。
<!DOCTYPE html>
<html><head><title>animation</title>
<script src="js/jquery-1.11.0.min.js"></script>
<style>
#area{ width:420px;height:320px;text-align:center;background:gray; }
</style>
</head>
<body>
<div id="area"><br><img src='slideshow/photo0.jpg'></div>
<button id="move">PLAY</button>
<script>
time=200;lastcode=10;
count=0;
$("#move").mouseover(function(){ anime=setInterval(nextfilm,time); })
.mouseout(function(){ clearInterval(anime); });
nextfilm=function()
{ if(count==lastcode)count=0
else{count++;} ;
// count=(count==lastcode)? 0 : count+1;
bufa="<br><img src='slideshow/photo"+count+".jpg'>";
$("#area").html(bufa);
}
</script>
</body>
</html>
slideshowフォルダにphoto0～10.jpg（400×300px）という画像を用意し、カーソルをPLAYボタンに乗せると0.2秒間隔で次々に画像を見せるクレイアニメ及びスライドショー再生プログラムをごくシンプルに作ってみました。
実行してみると、けっこうチカチカします。画像タイプの問題かなとも思いアニメーションによく使われるgifファイルも作って試しましたが、変わりません。よく見たら、同じ画像をgifにしたらデータ量が倍以上あるんですね。
このちらつき現象、時折チカチカせずスムーズになることもあり、常時スムーズだといいのにと思うのですが、ではこれはハード的な問題でプログラムで抑止することは不可能ということでしょうか？抑止できるとしたらどんな書き方があるのでしょうか？
チカチカさせる効果の紹介はネット上でも多いのですが、逆にチカチカしてしまうのを抑えたいとなると参考にできるページに行き当たらず、ここで質問に思い立った次第です。
どなたかご教示お願いします。
お礼
FIMOですか。なかなか良さそうですが、高いですね。 ありがとうございます。