HTML5について

質問

HTML5について質問ですが、連写した画像をムービーのように見せたいのですが可能でしょうか？

画像の下にスライダー（バー）を付けて、バーを左右に動かすと画像が早回しや巻き戻しのように動かしたいのです。

また、自動的に再生できるようにしたいのですが…

回答No.2

noris02 · ベストアンサー

簡単では 行かないと思いますが、
hoge.html と 同じ階層に フォルダ img、その下に
この設定だと icon0.gif ～ icon4.gifまで 存在している状態。
汚いjavascriptですが　中身を追ってみてください。
なお、opera以外では rangeはまだ 対応されないので代わりに
なにか おく必要がありますね。

<hoge.html>
<div id="view"></div>
<input type="range" id="img_no" value="0" onchange="change()">

<script>
/*config*/
var img_count=5; //imgの枚数
var speed=5; //rangeの変化
var timespeed=3000; //setetimeout ミリ秒
var img_file_name="img/icon" //imgファイル名( ファイル名のあとに数字)
var img_file_type="gif"; //img ファイルの拡張子
/*変数*/
var num=0;
var img_data=new Array();

for(i=0;i<=img_count;i++){
img_data[i]=img_file_name+i+"."+img_file_type;
}
/*change*/
function change(){
num=g("img_no").value;
show();
}
/*show*/
function show(){
num=parseInt(g("img_no").value);
if(num+speed>100)num=0;
if(num+speed<0)num=100;
else num+=speed;

g("img_no").value=num;
d=parseInt(g("img_no").value*img_count/100);
m="<img src=\""+img_data[d]+"\">";
g("view").innerHTML=m;
}
function times(){
timerid=setTimeout("show();times()", timespeed);
}
/*parts*/
function g(key){return document.getElementById(key);}
window.onload=function(){times();}

回答No.1

noris02

html だけでは 無理だと思います。
動かす為の コードを　考えなくてはいけないです。
html5 の機能を すべて 見たわけではないですが。
使うとしたら <input type="range"　>でしょうか・・

javascript、もしくはそれなりのpluginを 埋め込むことで
可能だと思います。

id　で 値を取得して それにあわせて 画像を空間に配置。
でも、 枚数が増えると　重そうです。。

お礼

回答ありがとうございます。

やはりHTML５だけでは難しんですね！

10枚程度の画像だけですが、重たくなるんであれば仕方がないです。

当方はjavascriptが詳しくないので、簡単に作れるんであれば教えていただけませんか？