幸運の館

幸運の館!@JUGEM トップ > - > スポンサーサイト
新着情報
スポンサーサイト

一定期間更新がないため広告を表示しています

幸運の館!@JUGEM トップ > JavaScript+jQuery > jQuery: 究極のスライドショーライブデモ
jQuery: 究極のスライドショーライブデモ
jQueryで作成したスライドショーのサンプルを4個紹介します。
いずれもスグレものです。


jQuery - スライドショー#1


このサンプルは、VCRボタンを使用してイメージを切り替えます。




jQuery - スライドショー#2


このサンプルは、イメージをサムネイル化して表示します。サムネイ化したイメージは左右にスクロールすることができます。イメージをクリックすると拡大表示します。



jQuery - スライドショー#3


このサンプルは、イメージをサムネイル化して表示します。イメージは上下にスクロールすることができます。イメージをクリックすると拡大表示します。イメージの「タイトル」と「説明文」も表示します。




jQuery - スライドショー#4


このサンプルは、イメージをサムネイル化して表示します。サムネイル化されたイメージをスクロールするには両端にマウスを移動します。
イメージをクリックすると拡大表示されます。[自動]ボタンをクリックすると7秒間隔でイメージを自動的に切り替えます。手動で切り替えることもできます。究極のスライドショーです。

幸運の館!@JUGEM トップ > JavaScript+jQuery > jQueryの実践サンプル集 (Part2)
jQueryの実践サンプル集 (Part2)
jQueryの実践サンプル集です。



◆jQuery: メニュー編


jQuery: ドック型メニュー


jQuery: ラバランプ型メニュー


jQuery: ラバランプ型メニュー (Part2)


jQuery: タブ型メニュー


jQuery: ツリー型のメニュー


jQuery: ツリー型のメニュー (Folder)


jQuery: ドロップダウン型メニュー(水平)


jQuery: ドロップダウン型メニュー(垂直)


jQuery: コンテキスト型のメニュー


jQuery: スライディング型のメニュー


jQuery: アコーディオン型のメニュー


jQuery: アコーディオン型のメニュー (Part2)


jQuery: アコーディオン型のメニュー (Part3)




◆jQuery: アコーディオン編


jQuery: アコーディオン


jQuery: アコーディオンメニュー


jQuery: 水平型アコーディオン


jQuery: 水平型アコーディオン (Part2)


jQuery: ポートレット




◆jQuery: テキスト、テキストエリア編


jQuery: Textareaのタブを有効にする


jQuery: Textareaをリサイズする


jQuery: ニュースティッカーを表示する


jQuery: イメージを切り替える




◆jQuery: ツールチップ、リンク編


jQuery: ツールチップ(Ajax版)


jQuery: カスタムツールチップ


jQuery: パンチカード(ソーシャルブックマーク版)




◆jQuery: ウィンドウ編


jQuery: ポップアップウィンドウ(リサイズ&ドラッグ)


jQuery: モダルダイアログ


jQuery: ページをブロックする


jQuery: ダイアログを表示する





◆jQuery: ボーダー、コーナー、スタイルシート編


jQuery: ボックスの角をカスタマイズする


jQuery: カラーピッカー


jQuery: 星(★)の数で評価する


jQuery: スタイルシートを切り替える




◆jQuery: テーブル、グリッド編


jQuery: テーブルの列を並べ替える


jQuery: テーブルの幅をリサイズする


jQuery: テーブルをページングする


jQuery: テーブルの行/列をハイライトする




◆jQuery: ドラッグ&ドロップ編


jQuery: 任意の方向にドラッグする


jQuery: ドロップするときのオプション設定


jQuery: フォルダーツリーをドラッグ&ドロップして移動


jQuery: リサイズ&ドラッグする




◆jQuery: スライダー編


jQuery: YouTubeのビデオを左右にスライドさせる


jQuery: スライダーでイメージを拡大・縮小する


jQuery: 水平方向にスライドさせる


jQuery: カラーピッカー


jQuery: スライダーで価格を選択




◆jQuery: スライドショー、イメージギャラリー、サムネイル編


jQuery: スライドショー


jQuery: イメージギャラリー


jQuery: イメージを水平方向にスクロール


jQuery: イメージを垂直方向にスクロール


jQuery: イメージを水平方向にスクロール(thickbox版)


jQuery: イメージをサムネイル化する




◆jQuery: 日付、時間編


jQuery: カレンダーから日付を選択する


jQuery: マウスで時刻を入力する


jQuery: カウントダウン


jQuery: タイマー




◆jQuery: フォーム、検証、進捗状況編


jQuery: 入力データを検証する


jQuery: すかし文字を表示する


jQuery: 入力したデータをクッキーに保存する


jQuery: 複数のドロップダウンリストを連動させる


jQuery: 進捗状況を表示する




幸運の館!@JUGEM トップ > JavaScript+jQuery > AjaxでAmazonの書籍をスライドで表示(自動|手動切り替え版)
AjaxでAmazonの書籍をスライドで表示(自動|手動切り替え版)
AjaxでAmazonの書籍をスライドで表示(自動|手動切り替え版)

このサンプルは、Amazonの書籍をジャンル(タレント)で検索してスライド形式で表示します。スライドは1秒間隔で自動的に切り替わります。スライドの番号をクリックすると手動で切り替えすることができます。



携帯アフィリエイトで稼ぐ!蝶乃塾6月生募集

幸運の館!@JUGEM トップ > JavaScript+jQuery > JavaScript: AjaxでFlickrの写真をスライドで表示
JavaScript: AjaxでFlickrの写真をスライドで表示
AjaxでFlickrの写真をスライドで表示

このサンプルは、FlickrのWebサービス経由で取得した写真をスライドで表示します。スライドは3秒間隔で切り替わります。番号[1]-[10]をクリックするそのスライドを表示します。[Next]をクリックすると手動に切り替わります。



幸運の館!@JUGEM トップ > JavaScript+jQuery > JavaScript: イメージをライトアップする(2)
JavaScript: イメージをライトアップする(2)
イメージをライトアップする(2)

このサンプルは、イメージにスポットライトをあてます。マウスを移動するとスポットライトが移動します。写真を部分的に表示したいときに応用すると便利です。

s = 50;     // スポットライトのサイズ
vp = 10;    // イメージの可視領域(パーセント)
startx = 0; // スポットライトの位置(X軸)
starty = 0; // スポットライトの位置(Y軸)



afp【ワンミニッツ】FXシステムユニット01拡張版



 1/8 PAGES >>
▲このページの先頭へ