簡単設置のWEBサイトで周囲360度から撮影した画像を回転表示するJavascript

WEBサイトで簡単に設置できる物体を360度回転して撮影した画像を回転表示する画像ビュアー ～ mamimgaround2.js

物体の全周囲の方向から撮影した多くの画像をJavaScriptで切り替えることにより回転表示したように見せます

使い方

1. 上記ボタンを押してmamimgaround2.jsをダウンロードします。
2. 以下のようの記述すればOKです

<!-- cssはお好みで設定してください -->
<div id="mia" style="width:100%;max-width:500px;"></div>

<script src="./js/mamimgaround2.js"></script>
<script>
  let mia=new TMamImageAround(
    //画像を内部に表示させたい要素のidを指定します
    document.getElementById("mia"),
    [
      //物体を回転して撮影した画像を配列で指定します
      "./carimg/2/c0000.jpg", "./carimg/2/c0010.jpg",
      "./carimg/2/c0020.jpg", "./carimg/2/c0030.jpg",
      "./carimg/2/c0040.jpg", "./carimg/2/c0050.jpg",
      "./carimg/2/c0060.jpg", "./carimg/2/c0070.jpg",
      "./carimg/2/c0080.jpg", "./carimg/2/c0090.jpg",
      "./carimg/2/c0100.jpg", "./carimg/2/c0110.jpg",
    ]
  );
</script>

使用例１

画像をマウスで左右ドラッグ、又はパンしてください。スライダーを変更しても画像が切り替わります。

使用例２

画像をマウスで左右ドラッグ、又はパンしてください。スライダーを変更しても画像が切り替わります。

<div id="mia2" style="width:100%;max-width:500px;"></div>

<script src="./js/mamimgaround2.js"></script>
<script>
  let mia2=new TMamImageAround(
    //画像を内部に表示させたいdivタグのidを指定します
    document.getElementById("mia2"),
    [
      //表示させたい画像を配列で指定します
      "./imgs/fig/01.jpg", "./imgs/fig/14.jpg",
      "./imgs/fig/13.jpg", "./imgs/fig/12.jpg",
      "./imgs/fig/11.jpg", "./imgs/fig/10.jpg",
      "./imgs/fig/09.jpg", "./imgs/fig/08.jpg",
      "./imgs/fig/07.jpg", "./imgs/fig/06.jpg",
      "./imgs/fig/05.jpg", "./imgs/fig/04.jpg",
      "./imgs/fig/03.jpg", "./imgs/fig/02.jpg",
    ]
  );
</script>