Webの記録

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

投稿日:

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

今回も、画像数枚のスライドショーをjQueryのライブラリを使って作ってみたいと思います。
今回チャレンジしてみたのは、「s3Slider.js」を使ったFlashのようにスムーズな動きをするスライドショーです。
とても簡単なので、わりと短時間でキレイなスライドショーが出来ました♪

s3Slider.jsのスライドショー画面イメージ

設置方法。

下準備。

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

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

配布サイト(http://www.serie3.info/s3slider/)より 「s3Slider.js」をダウンロードします。

headerの記述。

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

<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="js/s3Slider.js" type="text/javascript"></script>
スライドショー用のScriptをheaderに記述。

「timeOut: 3000」の部分の数字を小さくすると、画像の切替が早くなります。

<script type="text/javascript">
      $(document).ready(function() {         $('#slider').s3Slider({             timeOut: 3000         });     });
</script>

body部分に最初に表示する画像の設定を記述。

liの画像を上から実行する。表示したい枚数だけliで記述。Divのid名はheaderのScriptの部分と同じ。liについてclass名は取ったら動かなくなります。
画像のタイトル名の前の「span」はテキストの帯の位置を指定します。

<div id="slider">
<ul id="sliderContent">
	<li class="sliderImage"> <a><img src="画像1のパス" /></a>
<span class="top"><strong>画像1のタイトル</strong>
画像1の説明</span></li>
	<li class="sliderImage"> <a><img src="画像2のパス" alt="2" /></a>
<span class="top"><strong>画像2のタイトル</strong>
画像2の説明</span></li>
</ul>
</div>

 

CSSを記述。(配布サイトのをいじると楽だと思います)

今回は、テキストの位置を上下のみにしましたが、左右にする事も出来ます。

配布サイト(http://www.serie3.info/s3slider/)にデモがありますので、こちらを参考にされると良いと思います。

-Webの記録
-, ,

執筆者:


  1. とみぃ より:

    お久しぶりです。
    もっちゃまの足跡からこちらに、そしてドラムの世界を回ってここにたどり着きました。
    うう~~~~ん!!奥が深い!!
    何年も前の、クローバーの成長日記を思い出します。
    ドラム、深めておられるんですね。
    私も何か始めたい病にかかってきました。
    これからもまたお邪魔させて頂きますね。
    うう…でも、ここまで来れるかなぁ…心配^^;

    • Motoshige より:

      とみぃさんへ。

      お久しぶりです!!お元気でしたか??
      コメント、ありがとうございます!!!

      昨日、ふと気になって・・・とみぃさんの所へ訪問しました。
      すっかりご無沙汰していたので、もう忘れられているかなぁ~と思いましたが、覚えていてくださって・・・。
      そして、まさかココまでいらっしゃると思いませんでした。
      長旅、お疲れ様でした~!!!
      今度は、もっと最短で回れるように・・・考えておきますね。^^

      クローバー日記。
      もう何年前になるんでしょう。。。
      懐かしいです~。

      とみぃさんは、何を始められるのかな?
      新しい事をするのは、何だかわくわくしますね♪
      何か面白い事、見つけられたら教えてくださいね。

      私はWebとドラムの世界を、もっと深めていきたいと思ってます。
      ココでたくさんの「わくわく」を表現出来るように頑張りますね♪

comment

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

This blog is kept spam free by WP-SpamFree.

関連記事

no image

初心者のアクセス解析勉強メモ【用語と簡単にサイトをチェックしてみた】

この記事は約 1 分で読めます。 最近、興味があるのは・・・アクセス解析関係。 Webサイトを作った後、運営していくのにはやっぱり重要!アクセス解析をして、そのサイトの現在の状態を見て、それから目標を …

no image

WordPressプラグイン「PhotoDropper」でフリー画像を記事にラクラク挿入♪

この記事は約 1 分で読めます。 photo credit: Remedios205 文字だらけの記事。ちょっと読むのがツライですね。。。 でも、イメージ画像がナイ!そんな時に使えそうなプラグインを探 …

no image

WordPress 「contact form 7」と「Akismet」でスパムメール対策をしてみた。

この記事は約 1 分で読めます。 このサイトでは、「お問い合せ」のページに「contact form 7」というプラグインを使用しています。 コメントスパム対策にWordpressにデフォルトで入って …

no image

IllustratorやinDesignで難しい漢字(フォントで使用出来る異字体)を探す方法

この記事は約 2 分で読めます。 今までIllustratorやInDesignを使って難しい漢字(フォントで使用出来る異字体)を入力する時、そのソフトの中ですぐに変換出来る方法が分からず困った事があ …

no image

スマホ用にWebクリップアイコンを設置してみた

この記事は約 1 分で読めます。 Webクリップアイコンの設置はとても簡単!アイコン素材をちゃんとアップして、1行link要素を書くだけです。 iPhone、iPad、Androidでホーム画面にショ …