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…
});
});
記事の内容が近いもの:
