JavaScript PR

複数画像を色々なエフェクトで切替表示【jquery.nivo.slider.js】

記事内に商品プロモーションを含む場合があります

jquery.nivo.slider.jsを使って複数画像を色々なエフェクトでスライド切替表示する方法をご紹介します。

複数画像を色々なエフェクトで切替表示するCSSの記述

※default.css、nivo-slider.cssファイルを読み込みます。スライドエリア(.slider-wrapper)のCSS記述です。必要に応じて変更して下さい。

<link rel="stylesheet" href="default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<style type="text/css">
<!--
body {
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif;
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.4em;
	text-align:center;
	padding:15px 0 5px 0;
}
p{
	font-size:14px;
	text-align:center;
}
#idWrap{
	width:650px;
	margin:0 auto;
}
.slider-wrapper { 
	width: 200px;
	margin:0 auto;
}
-->
</style>

複数画像を色々なエフェクトで切替表示するHTMLの記述

※スライドエリア(class=”slider-wrapper”、id=”slider”)に5枚の切り替わり画像を用意しました。data-thumb=”サムネイル用の画像”を設定します。その他、必要に応じて変更して下さい。

<div id="idWrap">
	<h1>複数画像をスライドしながら色々なエフェクトで切替表示します。</h1>

	<div class="slider-wrapper theme-default">
		<div id="slider" class="nivoSlider">
<img src="i01.jpg" data-thumb="i01.jpg" alt="1枚目の画像" title="1枚目の画像" />
<img src="i02.jpg" data-thumb="i02.jpg" alt="2枚目の画像" />
<img src="i03.jpg" data-thumb="i03.jpg" alt="3枚目の画像" title="3枚目の画像" />
<img src="i04.jpg" data-thumb="i04.jpg" alt="4枚目の画像" />
<img src="i05.jpg" data-thumb="i05.jpg" alt="5枚目の画像" title="5枚目の画像" />
		</div>
	</div>

</div>

jquery.nivo.slider.jsを使って、複数画像を色々なエフェクトでスライド切替表示するJavaScriptの記述

※jquery-1.9.0.min.js、jquery.nivo.slider.jsファイルを読み込みます。$(‘スライドエリア’).nivoSlider()でスライドエリア内にある画像が切り替わり表示されます。

<script type="text/javascript" src="jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
	$('#slider').nivoSlider();
});
</script>

jquery.nivo.slider.jsで複数画像をスライド切替表示デモページ

jquery.nivo.slider.jsで複数画像をスライド切替表示デモ

ソース元:Nivo Slider

ソース元:Nivo Slider

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。