ブラウザ幅100%の左右画像スライダーを実現させるJs



ブラウザの横幅100%に対応して複数の画像を
左右にスライドさせて標示させるJavaScriptです。

1.読込むJsファイル

<script language="JavaScript" type="text/javascript" src="scripts.js"></script>

より、5~10行目辺り

var isScrollingVertically = false;	//垂直方向が否か
var slideSpacing = 40;	//サムネイル間の隙間
var currentSlideIndex = -1;
var currentMenuPage = 0;
var maxMenuPage = 0;
var menuWidth = 200;
var slideRows = new Array();

の数値を調整します。
また、431行目以降より、

slideRows[0] = new SlideRow();
slideRows[0].menuText = "";
slideRows[0].menuPage = 0;
slideRows[0].slides[0] = new Slide();
slideRows[0].slides[0].slideType = SLIDE_TYPE_TEXT;
slideRows[0].slides[0].slideWidth = 300;
slideRows[0].slides[0].slideHeight = 300;
slideRows[0].slides[0].slideHTML = '<img src="i01.jpg" alt="" border="0" />';
slideRows[0].slides[1] = new Slide();
slideRows[0].slides[1].slideType = SLIDE_TYPE_TEXT;
slideRows[0].slides[1].slideWidth = 300;
slideRows[0].slides[1].slideHeight = 300;
slideRows[0].slides[1].slideHTML = '<img src="i02.jpg" alt="" border="0" />';
slideRows[0].slides[2] = new Slide();
slideRows[0].slides[2].slideType = SLIDE_TYPE_TEXT;
slideRows[0].slides[2].slideWidth = 300;
slideRows[0].slides[2].slideHeight = 300;
slideRows[0].slides[2].slideHTML = '<img src="i03.jpg" alt="" border="0" />';
~

上記にてスライドさせたい画像を追記設定します。

 

2.CSSの記述例

<style type="text/css">
<!--
#leftarrow01 {
	position:				absolute;
	left:					0px;
	top:					270px;
	width:					39px;
	height:					39px;
	z-index:				3;
}
#rightarrow01 {
	position:				absolute;
	right:					0px;
	top:					270px;
	width:					39px;
	height:					39px;
	z-index:				3;
}
#divSlideRows{
	overflow: hidden;
	overflow-x: hidden;
	overflow-y: hidden;
	width: 100%;
	height: 500px;
	z-index: 1;
	margin:0 auto;
}
-->
</style>

左右の矢印ボタンとスライドー対象エリアを設定してます。

 

3.HTMLの記述例

<body onLoad="loadSlideRow(0,false);">
<h1>ブラウザ幅100%の左右画像スライダーです。</h1>
<p>ブラウザの横幅に対応して残りのサムネイルが標示されます。<br>(左右矢印ボタンクリックでサムネイルがスライドします)</p>
<div id="leftarrow01"><a href="javascript:slideRowRight(0);"><img src="l.jpg" width="39" height="39" alt="左" border="0"></a></div>
<div id="rightarrow01"><a href="javascript:slideRowLeft(0);"><img src="r.jpg" width="39" height="39" alt="右" border="0"></a></div>
<div id="divSlideRows"></div>
<script language="javascript" type="text/javascript">
	init();
</script>
</body>

「body」のonLoadとページ下部にJsの記述を設定してます。

 
ブラウザ幅100%の左右画像スライダーを実現させるデモ
 

スライダー系のプラグインって色々有り過ぎて、
検索しても理想なものを探すのが結構時間が掛かったりしますよね。

最終的にに自分で使った方が早かったりすることが良く有ります。