Webの記録

easySlider1.7.jsを使ってFlashのようなスライドショーにチャレンジ♪

投稿日:

この記事は約 5 分で読めます。

「easySlider1.7.js」を使って、数枚の画像のスライドショーを作りたいと思います。

自動で画像がスライドしますが、見ている人の意思で前後の画像へ戻したり進めたりする事が出来るスライドショーです。
今回は、サムネイルもテキストも入れないカタチのスライドショーにします。

easySlider1.7.jsを使ったスライドショーの画面イメージ

設置方法。

下準備♪

スライドしたい画像を数枚用意します。
スライドした枚数分だけ画像を用意します。サムネイル画像は今回ナシです。

jsファイルのダウンロード。

配布サイト(Easy Slider 1.7 – Numeric Navigation jQuery Slider)から、「easySlider1.7.js」をダウンロードします。
jQueryのjsファイルも準備。 (現在は、「jquery-1.6.2.min.js」)

headerの記述。

HTML ファイルのheaderでjsファイルの関連付けの記述。

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
初期化コードを記述をheaderに記述。

「auto」は自動的に次の画像に移動するかどうかで、「continuous」自動的に次の画像に移動して最後までいった時に最初に戻るかどうか・・・という意味。

<script type="text/javascript">
  		$(document).ready(function(){	
 			$("#slider").easySlider({ 
				auto: true,  
				continuous: true 
			}); 
		});
</script>
 body部分に最初に表示する画像の設定を記述。

スライドさせたい画像やHTMLの要素をliの中に記述する。

<div id="slider">
<ul>
	<li><a href="#"><img src="images/sample_img1.jpg" alt="1" /></a></li>
	<li><a href="#"><img src="images/sample_img2.jpg" alt="2" /></a></li>
	<li><a href="#"><img src="images/sample_img3.jpg" alt="3" /></a></li>
	<li><a href="#"><img src="images/sample_img4.jpg" alt="4" /></a></li>
	<li><a href="#"><img src="images/sample_img5.jpg" alt="5" /></a></li>
</ul>
</div>
<!-- /#slider -->
CSSを記述。(位置などの調整をする)

スライドの左右のボタンも自作出来たら自作で・・・。私は今回配布サイトのをダウンロードしてそのまま使ってみました。

お好みで「easySlider1.7.js」調整。

ブラウザで確認後、 もし切り替えの具合など調整したい時の為に・・・。

  • 「speed」・・・ 切り替えのスピード(数字が小さいほど早い)
  • 「pause」 ・・・自動に切り替わるまでの時間(数字が小さいほど早い)

配布サイト(Easy Slider 1.7 – Numeric Navigation jQuery Slider)では、他にも良さそうなデモを見せてくれています。そちらを参考にされると良いと思います♪

ライセンス・・・MITもしくはGPL

-Webの記録
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

ムームードメインで取得した独自ドメインをエックスサーバーで使う設定方法

この記事は約 1 分で読めます。「エックスサーバー」を利用する事が決まっていて、ドメインをどこで取得しようかな?と思った時、「エックスドメイン」という選択肢もあったのですが、今回は「ムームードメイン」 …

no image

透明画像を置いて画像をコピーガードする。

この記事は約 2 分で読めます。 今回は画像の上に透明画像を置く事で元の画像を右クリックで保存出来ないようにするテクニックです。 まずは、デモ画面を見て頂きましょうか・・・。 【2016.6.2】一部 …

no image

WordPressでオリジナルテーマ作りにチャレンジ4【index.php編】

この記事は約 2 分で読めます。WordPressのオリジナルテーマ作りにチャレンジしています。 今回は、「index.php」の部分を作りたいと思います。 前回までに1つのhtmlを「header. …

no image

初心者のアクセス解析勉強メモ【用語と計算式】

この記事は約 1 分で読めます。 Webサイトを制作し、運営していく中でアクセス解析は重要だと思っています。そのWebサイトを育て、サイト目的を達成させ、信の目的(事業)の達成をする為にも、とても興味 …

no image

jquery.gmap3.jsを使って、Googlemapを簡単にカスタマイズ♪

この記事は約 1 分で読めます。 今回は、GoogleMapを埋め込んで、カスタマイズ出来るjQuery プラグイン「jquery.gmap3.js」。使ってみたら楽に出来たので、メモです。 配布元: …