商品回転画像の作成方法

解決済

質問者：kujira2030
質問日時：2008/02/07 13:01
回答数：3件

ネットショッピングなどでよく見る商品回転画像の作成をしたいのです。
被写体を回転させながら写真にとって8枚用意しました。
JavaScriptで回転してみせる方法を以前雑誌で見た気がするのですが見つけられませんでした。
(フラッシュでもできると思うのですが・・)
どちらでも結構です　どなたかご伝授ください。よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： taloo
回答日時：2008/02/07 14:49

> 前に気になって入力していたタグがあるのですが、どこに.jpgを入れたらよいかわかりません。

画像の保存場所ですかね？

このスクリプトをそのまま使うのであれば、
HTMLファイルと同じフォルダに保存すればいいと思います。

> プリロード
クリックしたときに、すぐに画像が表示されるようにするおまじないです。

誤字脱字等
BBS投稿時のコピーミスでしょうか？

> <a href="Javascript:turnLeft();"><imgsrc="turnleft.gif"/></a>
<img src="">で、スペースを入れないと画像が表示されません。

初期設定の所
var way=0;
var photoArray=new Array(8); //行末に ; をつけた方が良いです。
for(i=0;i<8;i++){
photoArray[i]=new lmage();
photoArray[i],src="photo"+i+".jpg"
} //ここの閉じカッコが抜けています

左回転の所。
> document.getElmentByld("mainphoto").src=photoarray{way}.src;
photoarray{way}.srcではなく、photoArray[way].srcです。
（カッコの種類と大文字）

この回答への補足

talooさんすみません。
担当と自分でやってみたんですけど、画面が変わらないのです。
原因がわかりません。
(泣)

補足日時：2008/02/08 17:45

通報する

- 0
- 件

通報する

この回答へのお礼

すっきりしました。
ありがとうございました。
早速やってみます。

通報する

お礼日時：2008/02/07 15:00

No.2

回答者： noname#140971
回答日時：2008/02/07 14:38

次は、私が用いているパタパタ関数です。

切り替えをループで繰り返すのと一度切りの２つを用意しています。
逆順は For ループで操作したらいいです。

/*
　object の画像をパタパタと切り替えることを繰り返す。
-------------------------------------------------------------------
<body onLoad="setImages(3, 'koinu','jpg');patapatas(document.img, a_images, 500)">
-------------------------------------------------------------------
*/
function patapatas(object, a_images, duration ,count){
　if(count < a_images.length - 1){
　　count ++;
　}else{
　　count = 0;
　}
　object.src = a_images[count].src;
　var func=function(){patapatas(object, a_images, duration, count)}
　setTimeout(func, duration);
}

/*
　object の画像をパタパタと切り替えて最後の画像で停止。
-----------------------------------------------------
onclick="patapata(document.main.tv, a_tvs, 500, -1);
-----------------------------------------------------
*/
function patapata(object, a_images, duration ,count){
　if(count < a_images.length - 1){
　　count ++;
　　object.src = a_images[count].src;
　　var func=function(){patapata(object, a_images, duration, count)}
　　setTimeout(func, duration);
　 }
}

なお、実際にＨＰで書いているコードのあらましは次のようです。

<script type="text/javascript">
　var a_images = new Array(3);

　function setImages(max, name, type ){
　　for( var i = 0 ; i < max ; i++ ){
　　　a_images[ i ] = new Image(276, 234);
　　　a_images[ i ].src = name + i + "." + type;
　　}
　}
　　</script>
</head>
<body onLoad="setImages(3, 'koinu','jpg');patapatas(document.img, a_images, 500)">

- 0
- 件

通報する

この回答へのお礼

こんな方法もあるんですね。
いただきます。色々試してみたいと思います。
ありがとうございました。

通報する

お礼日時：2008/02/07 15:01

No.1

回答者： yambejp
回答日時：2008/02/07 13:11

回転のさせかたを指示したほうがよいのでは？

ボタンを押したら？画像をクリックしたら？逆回転は必要？
回転のスピードは？回転はエンドレス？
などなど・・・

基本的にはimageオブジェクトを用意しておいて、
トリガーに応じて、setTimeoutで所定のimgタグのsrcを
書き換えてやるとよいでしょう。
１回転だけならforで回すだけでいいでしょう

この回答への補足

ありがとうございます。(嬉しいです)

回転のさせかたは、ボタンをクリックして右にまわったり左に回ったりです。
スピードまで考えていませんでした。

前に気になって入力していたタグがあるのですが、どこに.jpgを入れたらよいかわかりません。
以下添付します。
-------------------
<div id="photo">
<img src="photo0.jpg"width="400"
height="300"id="mainPhoto"/>
</div>
<div id="navi">
<a href="Javascript:turnLeft();"><imgsrc="turnleft.gif"/></a>
<a href="Javascript:turnFront();"><imgsrc="front.gif"/></a>
<a href="Javascript:turnRight();"><imgsrc="turnRight.gif"/></a>
</div>

htmlに設置するソース

//初期設定
var way=0;
var photoArray=new Array(8)
for(i=0;i<8;i++){
photoArray[i]=new lmage();
photoArray[i],src="photo"+i+".jpg"

※説明
変数wayは現在の方向を表す。「photoArray」の配列に「photo0.jpg」から「photo7.jpg」までの8点の写真を代入する。これは画像のプリロードの効果も兼ねている。←これがよくわからないのです。

//左回転
function turnLeft(){
if(way==0){
way=7;
}else{
way--;
}
document.getElmentByld("mainphoto").src=photoarray{way}.src;
}
//右回転
function turnRight(){
if(way==7){
way=0;
}else{
way++;
}
document.getElementByld("mainPhoto").src=photoArray[way].src;
}
//正面
function turnFront(){
document.getElementByld
("mainPhoto").src=photoArray[0].src;
way=0;
}

-----------------
これが載っていた雑誌があればよかったんですけど・・・