- 締切済み
jsにて画像を360°回転させる方法
質問させてください。 下記のサイトの一番左のスポーツカーのデモに http://jquery.vostrel.cz/reel#demo 画像両サイドに矢印を設けてその矢印をクリックしても 画像が回るようにしたいのですがわかる方いますでしょうか? 何卒宜しくお願い致します。
- みんなの回答 (2)
- 専門家の回答
みんなの回答
- 神崎 渉瑠(@taloo)
- ベストアンサー率44% (1016/2280)
回答No.2
http://jquery.vostrel.cz/demo/rc-reel.jpg こういう画像を用意して、background-imageに指定、 ドラッグしたら、その移動量に合わせてbackground-positionを変更してください。
- utun01
- ベストアンサー率40% (110/270)
回答No.1
単純に矢印の画像をDIV等にはめて配置して そのDIVをクリックした際にドラッグした際のイベントを実行すればできるはずですよ。
お礼
質問に答えて頂き誠にありがとうございます!! すみません、cssはわかるのですがjsとの結び付けがわかりません。。 どのように記述すれば宜しいでしょうか? 現状下記を読み込み <script language="JavaScript" type="text/javascript" src="../js/jquery-1.4.2.min.js"></script> <script language="JavaScript" type="text/javascript" src="../js/jquery.reel.js"></script> <script language="JavaScript" type="text/javascript" src="../js/jquery.disabletextselect-min.js"></script> <script language="JavaScript" type="text/javascript" src="../js/jquery.mousewheel-min.js"></script> <script type="text/javascript" src="../../../js/rollover.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#image').reel({ frames: 9, indicator: 40, frame:5, loops:false, delay:20, vertical:true }); }); </script> 下記の様に画像をしていさせています。 <div><img src="/01.jpg" name="image" width="393" height="388" id="image" /></div> お忙しい所大変申し訳ございませんが、 お力貸して頂ければ幸いです! 何卒宜しくお願い致します。