purazumakoiの[はてなブログ]

技術メモから最近はライフログも増えてきてます。

タブメニューやスライドショーをに使えるjQueryプラグイン

JavaScript jQuery メモ

ボタンを押したら画像がフェードイン、アウトするスライドショーを作りたいと思って

JQuery Cycle Plugin
のfadeを使っていたのだが、これだと枠をCSSで背景として、メイン画像をCMSで登録するということがなかなか難しかった


そこで
jQueryを使ったタブメニューの実装サンプルまとめ | 5am! Web Illusions
こちらのフェードアウト/フェードイン エフェクト
の部分をタブをボタンとし、内容の部分に画像表示HTMLを書けば、スライドショーとして利用できる


というメモ


実行環境は

とのこと

サンプル

jQueryスライドショーサンプル
デザが当たってないけど。。機能的要件は満たしているのでUP


↑のサンプル今回使用したスライドショー用ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>jQueryスライドショーサンプル</title>
<meta http-equiv="Content-Style-Type" content="text/css"> 
<meta http-equiv="Content-Script-Type" content="text/javascript"> 

<link href="css/ui.tabs.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.tabs.js"></script>
<script type="text/javascript">
 $(function() {
  $('#ui-tab2_normal > ul').tabs({ fx: { opacity: 'toggle', duration: 'normal'  } });
 });
</script>
</head>

<body>
<div>
 <div id="ui-tab2_normal">
  <ul>
   <li><a href="#fragment-2-1_normal"><span>タブ1</span></a></li>
   <li><a href="#fragment-2-2_normal"><span>タブ2</span></a></li>
   <li><a href="#fragment-2-3_normal"><span>タブ3</span></a></li>
  </ul>
  <div id="fragment-2-1_normal">
   <p>タブ1の内容</p>
  </div>
  <div id="fragment-2-2_normal">
   <p>タブ2の内容</p>
  </div>
  <div id="fragment-2-3_normal">
   <p>タブ3の内容</p>
  </div>
 </div>
</div>
</body>
</html>