この記事の目次
高機能なAjaxライブラリjQueryを使ったスライドショー。
デモ
設置方法
easy slider 配布ページよりデータをダウンロードします。
head要素に以下を埋め込みます。（デモ４）
<script src=”js/jquery.js” type=”text/javascript”></script>
<script src=”js/easySlider1.5.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#slider”).easySlider({
auto: true,
continuous: true });
});
</script>表示する部分は次の通りです。
<div id="slider"> <ul> <li><img src="images/01.jpg" alt="" /></li> <li><img src="images/02.jpg" alt="" /></li> <li><img src="images/03.jpg" alt="" /></li> <li><img src="images/04.jpg" alt="" /></li> <li><img src="images/05.jpg" alt="" /></li> </ul> </div>
CSSの設定（デモ４）
#slider{}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li{
width:696px;
height:241px;
overflow:hidden;
}
#prevBtn, #nextBtn{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
}
#nextBtn{
left:696px;
}
#prevBtn a, #nextBtn a{
display:block;
width:30px;
height:77px;
background:url(images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a{
background:url(images/btn_next.gif) no-repeat 0 0;
}
画像やテキストなどを配置することが可能です。スライドのコントローラーはテキストや画像を使用することができます。
