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

複数画像を色々なエフェクトでスライド切替できるJsの様です。

1.読み込むCSSファイルと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">
<!--
.slider-wrapper { 
	width: 200px;
	margin:0 auto;
}
-->
</style>

2.HTMLの記述例

<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>

3.読込むJsとJavaScriptの記述例

<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で複数画像をスライド切替表示デモ

ソース元:Nivo Slider