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

iPad・iPhoneでレイアウトが崩れた時に試してみたこと

この記事は約 1 分で読めます。 今まではWebサイト制作は、PCでの表示だけを意識して作っていたのですが、最近iPadやiPhone・Androidでのアクセスが増えて、お仕事の依頼もPCだけでなく …

no image

WordPress 「IE6 No More」プラグインでアラートを表示させてみた。

この記事は約 1 分で読めます。 IE6ブラウザで見た時だけ、バージョンアップを案内する表示をさせたいと思います。 幾つかWordpressのプラグインで見つけたのですが、表示が上手くいかないものもあ …

no image

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

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

no image

Facebookページをタイムラインに移行してみた♪

この記事は約 1 分で読めます。 2012年3月1日、Facebookページで大きな変化がありました! いままで「いいね!」を獲得する為に様々な方法がとられていましたが、「タイムライン化」になった事で …

no image

WordPress カテゴリごとに部分的デザインを変えたい時

この記事は約 1 分で読めます。 WordPressで自分なりにテーマをカスタマイズしていると、カテゴリごとにデザインを変えたい!ということがあります。 ページまるごとデザイン(表示)を変える場合と、 …