CG等で物体の全周囲の方向から撮影した多くの画像をJavaScriptで回転表示する
■使い方
-
上記ボタンを押してmamimgaround.jsをダウンロードします。
- mamImgAroundを使いたいファイルで、
<script src="./js/mamimgaround.js"></script>
のように、相対又は絶対パスでmamimgaround.jsを指定します。
-
setMamImageAround関数を呼び出します。
setMamImageAround("設定したID名",画像URLを示した配列, "左ボタンのID", "右ボタンのID");
■使用例
画像を左右にドラッグしてください
<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>