jQuery.Brazzers-Carousel.jsを使って複数画像の上を左右にマウスカーソル移動すると画像が切替り(カルーセル)表示する方法をご紹介します。
Contents
ディスプレイ広告
複数画像の上を左右にマウスカーソル移動でカルーセル表示するCSSの記述
※jQuery.Brazzers-Carousel.min.cssファイルを読み込みます。カルーセル画像表示エリア(.item)を用意します。必要に応じて変更して下さい。
<style> h1{ text-align: center; font-size: 18px; padding: 20px 0; } .item{ width: 350px; margin: 0 auto; } </style> <link rel="stylesheet" href="jQuery.Brazzers-Carousel.min.css">
複数画像の上を左右にマウスカーソル移動でカルーセル表示するHTMLの記述
※カルーセル画像表示エリア(class=”item”)に9枚のjpg画像(1~9.jpg)を用意しました。必要に応じて変更して下さい。
<h1>画像の上を左右にマウスカーソル移動すると画像が切替り(カルーセル)表示します</h1> <div class="item"> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"> <img src="4.jpg"> <img src="5.jpg"> <img src="6.jpg"> <img src="7.jpg"> <img src="8.jpg"> <img src="9.jpg"> </div>
jQuery.Brazzers-Carousel.jsを使って、複数画像の上を左右にマウスカーソル移動でカルーセル表示するJavaScriptの記述
※jquery-1.11.3.min.js、jQuery.Brazzers-Carousel.min.jsファイルを読み込みます。$(カルーセル画像表示エリア).brazzersCarousel()を設定するだけです。
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="jQuery.Brazzers-Carousel.min.js"></script> <script> $(document).ready(function() { $(".item").brazzersCarousel(); }); </script>
jQuery.Brazzers-Carousel.jsを使って複数画像をマウスカーソル移動でカルーセル表示するデモページ
jQuery.Brazzers-Carousel.jsを使って複数画像をマウスカーソル移動でカルーセル表示するデモページ
ソース元:Brazzers-Carousel-Repo
以下がソース元です。
Brazzers-Carousel-Repo
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。