jQuery.ThreeSixtyRotate.js

About

画像連番で商品写真とかクルクルまわすやつ

Download

1026/jQuery.ThreeSixtyRotate

Usage

HTML

<script type="text/javascript" src="/vendor/jquery.min.js"></script>
<script src="/js/jquery.360rotate.js"></script>
<div class="example"><p>Now loading...</p></div>

レスポンシブ非対応CSS

.example {
    position: relative;
    width: ---px;
    height: ---px;
}
.example li {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: 100%;
}

レスポンシブ対応CSS

.example {
  position: relative;
  width: ---px;
  max-width: 100%;
}
.example ul {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: (height/width*100)%;
}
.example li {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-size: 100%;
}

JavaScript（optionは初期値を記載）

$(function(){
  ThreeSixtyRotate('.example',{
    imgPath: 'img/rotate/', //画像パス（＊必須）（画像ファイル名が数字だけでなければ数字の直前まで）
    imgEx: 'png',           //画像の拡張子
    zeroPadding: 1,         //Zero Padding (ex:1→0、01→1、001→2)
    imgFirstNum: 1,         //一番初めの画像ファイル名の1の位の数字（大抵 0 or 1）
    totalFrame: 90,         //画像枚数
    startFrame: 1,          //1フレーム目を何枚目の画像にするか
    clockwise: true,        //画像の書き出しが、時計回りならtrue、反時計回りならfalse
    rotateSpeed: 1,         //ドラッグで回転させるときのスピード
    inertia: true           //慣性 (false で慣性なし)
    autoRotate: false,      //自動で回転させるか
    frameRate: 30,          //フレームレート
    overStop: true,         //自動で回転させた時、マウスオーバーで止めるか否か
    preload: true,          //画像をプリロードするか（基本trueでいいかと）
    showDuration: 300       //フェード表示のduration
  });
});

Browser

IE8+

Demo

自動回転なし

以下全てのデモでレスポンシブ対応

Now Loading...

JavaScript

ThreeSixtyRotate('.demo-1',{
  imgPath: 'img/',
  imgEx: 'png',
  zeroPadding: 0,
  imgFirstNum: 1,
  totalFrame: 23,
  startFrame: 1,
  clockwise: false,
  rotateSpeed: 1,
  inertia: true,
  autoRotate: false,
  frameRate: 24,
  overStop: true,
  preload: true,
  showDuration: 300
});

HTML

<div class="demo-1"><p>Now loading...</p></div>

自動回転あり

Now Loading...

JavaScript

ThreeSixtyRotate('.demo-2',{
  imgPath: 'img/',
  imgEx: 'png',
  zeroPadding: 0,
  imgFirstNum: 1,
  totalFrame: 23,
  startFrame: 1,
  clockwise: false,
  rotateSpeed: 1,
  inertia: true,
  autoRotate: true,
  frameRate: 24,
  overStop: true,
  preload: true,
  showDuration: 300
});

HTML

<div class="demo-2"><p>Now loading...</p></div>

応用：html上に1枚目の画像を設置、showDuration: 0

ページロード時に一枚目の画像が表示。全画像のロードが終わると回転が始まり、
比較的ロードに対するストレスが減る（気がする）

JavaScript

ThreeSixtyRotate('.demo-3',{
  imgPath: 'img/',
  imgEx: 'png',
  zeroPadding: 0,
  imgFirstNum: 1,
  totalFrame: 23,
  startFrame: 1,
  clockwise: false,
  rotateSpeed: 1,
  inertia: true,
  autoRotate: true,
  frameRate: 24,
  overStop: true,
  preload: true,
  showDuration: 0
});

HTML

<div class="demo-3"><img src="img/1.png" width="480" height="270" alt=""></div>
Fork me on GitHub