jQueryスライドショー(複数種類あり)

jQueryという現在活発に開発されているライブラリを利用しています。
これらライブラリの利点はなによりもロジック(仕組み)を知らなくても簡単に設置できるところにあります。行うことは設置(HTMLとCSSは必須)と必要に応じてちょっとした設定変更だけです。

jQueryを使ったプログラムはたくさんありますが、今回は写真などのスライドショーに最適なプログラムです。
スライドさせる効果の種類がいくつかあり、head内にその設定部分があります。

今やフラッシュを使わなくてもスライドショー程度は可能になり、また誰でも簡単に設置できます。

写真をフォルダに入れるだけで枚数を自動で取得しつつ表示するphp版も作ってみましたので、よろしければ。※サーバーがphpに対応している必要があります。

詳細はダウンロードしたファイル(htmlファイルもしくはphpファイル)にも記述しています。

ダウンロードしたものにはindex.htmlとindex.phpがあります。
index.phpを使えばファイルを自動取得しますが、
サーバーがphpに対応している必要があります。
(fc2では動きません)
phpが動かないサーバの場合はhtml版もありますので、そちらを使ってください。
※写真を追加するには手動でタグを書き込む必要があります。
(具体的には画像の数だけimgタグを追加してください)

※imgタグに対して幅や高さの指定は行っていないので、
どんなサイズでもちゃんと表示されます。もちろん幅、高さを指定してもOKです。

ファイル名は必ず数字のみの連番で!1.jpgから順に表示されていきます。

ダウンロード⇒
zipファイルをダウンロードしたら解凍(展開)してください。
するとsliderというフォルダができます。その中に必要なものがすべて入っています。
imgフォルダ内にはサンプル画像が入ってますので、それを入れ替えればOKです。

フォルダ内のファイルとフォルダとその説明

  • index.html 
    phpが使えない場合、または既存ファイルがhtmlの場合はこちらをお使いください。
    ※あなたがやることは、
    まずindex.htmlから必要な部分(html内に記述してます)をコピーしてご自分のhtmlファイルに貼り付けてください。
    imgフォルダに画像を入れ、htmlファイルにその画像の分だけimgタグを追加することです。
  • index.php 
    phpが使える場合はこちらを。写真をフォルダに入れるだけで自動で枚数を取得し、表示してくれます。
    ※あなたがやることは必要な部分(phpファイル内に記述しています)を自分のhtmlファイルに記述し、
    拡張子を.html⇒.phpに変更し、フォルダに好きなだけの画像(jpg)を入れるだけです。
    もちろん写真のファイル名は数字の連番です。
  • cycle.js 
    これは必ず必要です。すでにhead内に読み込むためのタグを記述しているので、
    その部分をコピーすればOKです。
  • imgフォルダ 写真を入れるフォルダです。
    jpgしか対応していません。ファイル名は1から連番で入れてください。例 1.jpg 2.jpg ・・・

サンプル
フェード
http://www.kens-web.com/school/sample/java/slider/

スクロール
http://www.kens-web.com/school/sample/java/slider2/

シャッフル
http://www.kens-web.com/school/sample/java/slider3/

その他以下様々な種類を設定できます。

turnUp/Down/Left/Right
zoom
fadeZoom
blindX
blindY
blindZ
growX
growY
curtainX
curtainY
cover
uncover
toss
wipe

※head部分の下記の部分で設定します。以下はtossを設定している例。
$(document).ready(function() {
    $(‘.slideshow’).cycle({
  fx: ‘toss’ // choose your transition type, ex: fade, scrollUp, shuffle, etc…
 });
});

記事の内容が近いもの:

  1. 画像等のランダム表示

カテゴリー: javascript(ajax)など   パーマリンク

コメントは受け付けていません。