トップへ(mam-mam.net/)

簡単設置のWEBサイトで商品周囲360度撮影画像を回転表示

検索:

CG等で物体の全周囲の方向から撮影した多くの画像をJavaScriptで回転表示する

mamimgaround.js(4KB)ダウンロード

■使い方

■使用例

画像を左右にドラッグしてください

<div style="display:flex;width:100%;">
  <div style="width:10%;"><button id="mamImgAroundPrev">←<br>回<br>転</button></div>
  <div id="mamImgAround" style="width:80%;"></div>
  <div style="width:10%;"><button id="mamImgAroundNext">→<br>回<br>転</button></div>
</div>

<script>
window.addEventListener("load",function(){
  imgs=[
  "./carimg/c0000.jpg", "./carimg/c0010.jpg", "./carimg/c0020.jpg",
  "./carimg/c0030.jpg", "./carimg/c0040.jpg",
  "./carimg/c0050.jpg", "./carimg/c0060.jpg", "./carimg/c0070.jpg",
  "./carimg/c0080.jpg", "./carimg/c0090.jpg",
  "./carimg/c0100.jpg", "./carimg/c0110.jpg", "./carimg/c0120.jpg",
  "./carimg/c0130.jpg", "./carimg/c0140.jpg",
  "./carimg/c0150.jpg", "./carimg/c0160.jpg", "./carimg/c0170.jpg",
  "./carimg/c0180.jpg", "./carimg/c0190.jpg",
  "./carimg/c0200.jpg", "./carimg/c0210.jpg", "./carimg/c0220.jpg",
  "./carimg/c0230.jpg", "./carimg/c0240.jpg",
  "./carimg/c0250.jpg", "./carimg/c0260.jpg", "./carimg/c0270.jpg",
  "./carimg/c0280.jpg", "./carimg/c0290.jpg",
  "./carimg/c0300.jpg", "./carimg/c0310.jpg", "./carimg/c0320.jpg",
  "./carimg/c0330.jpg", "./carimg/c0340.jpg",
  "./carimg/c0350.jpg",
  ];
  setMamImageAround("mamImgAround",imgs, "mamImgAroundPrev", "mamImgAroundNext");
});
</script>