42zz/360d-viewer

360度スライド回転できるビュワー

360度画像スライダー

このプロジェクトは、ユーザーがマウスやタッチ操作で360度画像をインタラクティブに回転させることができるシンプルな画像ビューアーを実装しています。

機能

• 360度画像の表示
• マウスドラッグによる画像回転
• タッチスクリーンデバイスでのスワイプ操作対応
• スムーズな画像遷移
• 画像のプリロード

セットアップ

1. プロジェクトを任意のディレクトリにクローンまたはダウンロードします。

2. 以下のファイル構造を確認します：

   360d-viewer/
   ├── index.html
   ├── viewer.js
   └── img/
       ├── image1.jpg
       ├── image2.jpg
       └── ...
   

3. index.htmlファイルをブラウザで開きます。

使用方法

1. ブラウザでindex.htmlを開くと、360度画像ビューアーが表示されます。
2. マウスユーザー：
   • 画像上でマウスを左クリックしたまま左右にドラッグすると、画像が回転します。
3. タッチスクリーンユーザー：
   • 画像上で指を左右にスワイプすると、画像が回転します。

カスタマイズ

• 画像の追加や変更：

  1. images/ディレクトリに新しい画像を追加します。
  2. index.htmlファイル内の<div id="viewer">セクションに新しい<img>タグを追加します。

• 回転感度の調整：

  1. script.jsファイルを開きます。
  2. if (Math.abs(diff) > 5)の行で、5の値を変更します。小さい値にすると感度が上がり、大きい値にすると感度が下がります。

注意事項

• このスクリプトは、モダンブラウザ（Chrome、Firefox、Safari、Edge最新版など）で動作確認しています。
• 大量の高解像度画像を使用する場合、初期ロード時間が長くなる可能性があります。