easySlider:複数画像のスライド表示を簡易に導入できるJs



複数画像を「Prev・Next」「1・2・3…」でスライドできるJsの導入方法です。

1.JavaScriptの記述例

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){	
	$("#slider").easySlider({
	auto: true,
	continuous: true,
	nextId: "slider1next",
	prevId: "slider1prev",
	});
	$("#slider2").easySlider({ 
	numeric: true
	});
});
</script>

2.CSSの記述例

以下は任意です。

<style type="text/css">
<!--
/* slider */	
#slider ul, #slider li,
#slider2 ul, #slider2 li{
	margin:0;
	padding:0;
	list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{ 
	width:696px;
	height:241px;
	overflow:hidden; 
}	
#prevBtn, #nextBtn,
#slider1next, #slider1prev{ 
	display:block;
	z-index:1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{  
	display:block;
	text-align:left;
	color:#333333;
	text-decoration:none;
	padding:5px 0 5px 0;
}
#prevBtn a:hover, #nextBtn a:hover,
#slider1next a:hover, #slider1prev a:hover{
	text-decoration:underline;
}
#nextBtn a, #slider1next a{ 
}	

/* numeric controls */	
ol#controls{
	margin:1em 0;
	padding:0;
	height:28px;	
}
ol#controls li{
	margin:0 10px 0 0; 
	padding:0;
	float:left;
	list-style:none;
	height:28px;
	line-height:28px;
}
ol#controls li a{
	float:left;
	height:28px;
	line-height:28px;
	border:1px solid #ccc;
	background:#999999;
	color:#ffffff;
	padding:0 10px;
	text-decoration:none;
}
ol#controls li.current a{
	background:#ffffff;
	color:#000000;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
-->
</style>

3.HTMLの記述例

	<div id="slider">
	<ul>
        <li><img src="i01.jpg" alt="" /></li>
        <li><img src="i02.jpg" alt="" /></li>
        <li><img src="i03.jpg" alt="" /></li>
	</ul>
	</div>
<br>
<br>
	<div id="slider2">
	<ul>
        <li><img src="i01.jpg" alt="" /></li>
        <li><img src="i02.jpg" alt="" /></li>
        <li><img src="i03.jpg" alt="" /></li>
	</ul>
	</div>

easySlider:複数画像のスライド表示のデモ

ソース元:Easy Slider 17 Numeric Navigation jQuery Slider

画像のスライダー系って良く使われるので結構色んな種類がありますよね。