Ajax,Javascriptサンプル、画像表示系の設置方法
スライドショー
jquery.animated.innerfade.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ANIMATEDINNERFADE</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.animated.innerfade.js">
</script>
<script type="text/javascript">
$(document).ready( function(){
$('ul#animated-portfolio').animatedinnerfade({
speed: 3000,
timeout: 5000,
type: 'sequence',
containerheight: '400px',
containerwidth: '666px',
animationSpeed: 5000,
animationtype: 'slide',
bgFrame: 'none',
controlBox: 'none',
displayTitle: 'none'
});
} );
</script>
<style>
ul#animated-portfolio{
padding: 0;
margin: 0;
list-style-type: none;
}
ul#animated-portfolio li{
padding: 0;
}
</style>
</head>
<body>
<ul id="animated-portfolio">
<li><a href="#"><img src="1.jpg" width="791" height="524" /></a></li>
<li><a href="#"><img src="2.jpg" width="791" height="524" /></a></li>
<li><a href="#"><img src="3.jpg" width="791" height="524" /></a></li>
<li><a href="#"><img src="4.jpg" width="791" height="524" /></a></li>
</ul>
</body>
</html>
限られた範囲内を移動しながらスライドショーするスクリプト。
マスク内の画像がアニメーションするようなイメージです。
jqueryを使用します。
サイトへ行き、jquery.animated.innerfade_3.zipをダウンロードします。
解凍したら中にサンプルやjsファイルが入っていますので、
まずは中身を確認してください。
それから、ｊｓフォルダの中身、 jquery.js と jquery.animated.innerfade.js を任意の場所へアップロードします。
ファイルのアップロードが完了したら、適用させたいページへ読み込ませます。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.animated.innerfade.js">
次に動作の設定を書き込みます。
<script type="text/javascript">
$(document).ready( function(){
$('ul#animated-portfolio').animatedinnerfade({
speed: 1000, // アニメーションのスピード（フェードとかの）
timeout: 5000, // １枚の画像の表示時間
type: 'sequence', // スライドショーの形式。 sequence = 読み込み順 random = ランダム
containerheight: '300px', // 表示範囲 縦
containerwidth: '666px', // 表示範囲 横
animationSpeed: 5000, // アニメーションのスピード（動き）
animationtype: 'fade', // 画像の切り替え fade = フェード slide = スライド
bgFrame: 'none', // フレーム
controlBox: 'none', // コントロール
displayTitle: 'none' // タイトルを入れるか否か
});
} );
</script>
ul#animated-portfolio の箇所がスライドショーのターゲットとなる要素に付加するセレクタです。
その他の項目については、各コメントを参考にしてください。
先ほど設定したセレクタ名を要素に付加します。
<ul id="animated-portfolio">
<li><a href="#"><img src="1.jpg" width="791" height="524" /></a></li>
<li><a href="#"><img src="2.jpg" width="791" height="524" /></a></li>
<li><a href="#"><img src="3.jpg" width="791" height="524" /></a></li>
<li><a href="#"><img src="4.jpg" width="791" height="524" /></a></li>
</ul>
これで、ul内のli要素がスライドショーとしてアニメーションします。
設定は簡単だから検討材料には入りやすいと思います。あと、パノラマ形式でも表示可能なようです。パーツ的な使い方が良いのではないでしょうか。
SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。
画像表示
コンテンツ表示
ナビゲーション
ユーザー補助
その他
