Ajax,Javascriptサンプル、画像表示系の設置方法
スライドショー
photoshuffler.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="photoshuffler.js"></script>
<title>phot</title>
<style type="text/css">
body{margin:0px;}
#photodiv{width:666px;}
</style>
</head>
<body>
<div id="photodiv">
<img id="photoimg" src="1.jpg" />
</div>
</body>
</html>
シンプルなフェードモーションのスライドショーです。
jsファイルに登録した画像を順番にフェードスライドして表示します。
ライブラリを使用しないので設置も簡単です。
サイトへ行きphotoshuffler.jsをダウンロードしてきて下さい。
ページ冒頭にある「source file」というリンクをクリックすると圧縮ファイルをゲットできます。
jsファイルを適当な所にアップしたら、ページに読み込ませます。
<script type="text/javascript" src="photoshuffler.js"></script>
次にCSSの設定をします。
#photodiv{width:画像の横幅;}
そして、HTML要素のマークアップを行います。
<div id="photodiv">
<img id="photoimg" src="1.jpg" />
</div>
imgには最初に表示させておきたい画像のパスを記述してください。
その他のidやclassは上記のように付加します。
そして、スライドショーで表示したい他の画像をphotoshuffler.jsに登録します。
var gblImg = new Array(
"2.jpg",
"3.jpg",
"4.jpg"
);
ファイルの29行目からのvar gbImgへ上記のように画像のパスを指定します。
シンプルだから使いと思います。そんなに機能が要らなくて見せるだけっていうなら丁度いいかもしれませんね。
SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。
画像表示
コンテンツ表示
ナビゲーション
ユーザー補助
その他
