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アナリティクスタグは流用しないで下さい。