turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示する方法をご紹介します。
複数枚のコマ送り画像を用意して切替表示するとアニメーションみたいに出来ます。回転する3D画像を用意しても良いですね。
Contents
ディスプレイ広告
turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示するCSS記述
※複数画像を切替表示するエリア(.turntable、.turntable ul、.turntable ul li)のCSS記述です。必要に応じて変更して下さい。
<style> body{ padding: 0; margin: 0; text-align: center; font-size: 16px; } h1{ font-size:20px; line-height:1.6em; text-align:center; padding: 15px 0 25px 0; } .turntable { margin: 0px auto; width: 500px; } .turntable ul { padding: 0px; margin: 0px; } .turntable ul li { list-style-type: none; display: none; } .turntable ul li img { width: 100%; } .turntable ul li.active { display: block; } </style>
turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示するHTML記述
※複数画像を切替表示するエリア(#myTurntable)内のliタグに7枚の画像(1~7.jpg)を用意します。
<h1>turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示します。<br>以下の画像上でマウスカーソルを左右に移動させてみて下さい。</h1> <div id="myTurntable" class="turntable"> <ul> <li data-img-src="1.jpg"></li> <li data-img-src="2.jpg"></li> <li data-img-src="3.jpg"></li> <li data-img-src="4.jpg"></li> <li data-img-src="5.jpg"></li> <li data-img-src="6.jpg"></li> <li data-img-src="7.jpg"></li> </ul> </div>
turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示するJavaScriptの記述
※jquery.min.js(v2.2.4)、turntable.jsファイルを読み込みます。$(‘切替表示するエリア’).turntable({オプション})を記述します。axisには’x, y, or scroll’の様にx軸、y軸、ページスクロールで切替るのかを指定します。
<script type="text/javascript" src="jquery.min.js"></script> <script src="turntable.js"></script> <script type="text/javascript"> $('#myTurntable').turntable({ axis: 'x', reverse: true }); </script>
turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示するデモページ
turntable.jsを使ってスクロールまたはXY軸カーソル移動で複数画像を切替え表示するデモページ
ソース元:Turntable.js : A Responsive JQuery Slider
Turntable.js : A Responsive JQuery Slider
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。