jQuery.toolsで作るマウスカーソルでスライドするスライドショーの作り方

jQuery

jQuery TOOLS

jQuery.toolsを使ったスライドショーを作ってみました。
作り方メモがてらのコードとサンプルの紹介。

タブにカーソルを乗せると写真がスライドされます&一定時間が経過すると写真がスライドされます、という感じ。

サンプルはこちら〜

準備するもの

上のをどっかに保存して<head>内で読み込むべし。(<head>内じゃなくても動くみたいですけど)

ほんでこちらのコードを</body>前付近に。

$(function() {
$(".tab").tabs("#imgspace > div", {
tabs: 'a',
current: 'current',
effect: 'fade',
initialIndex: 0,
event: 'mouseover',
rotate: true,
fadeInSpeed: "slow",
fadeOutSpeed: "slow",
history: false
}).slideshow({
autoplay: true,
autopause: true,
interval: 3000,
clickable: true,
api: false
});
});

「interval:3000,」のところは自動的にスライドさせる間隔で、ミリ秒単位で決められます。

こちら(APIによるタブ操作)のページを参考に作りました〜感謝!
Flashで作るより画像の入れ替えやリンク先の変更などのメンテナンスが楽ちん。

jQuery」カテゴリの人気記事

  • jQuery LightBoxプラグイン『prettyPhoto』でURL末尾へハッシュタグ#!prettyPhotoを付加させないようにするメモ 32 views
  • jQuery TOOLS jQueryとjQuery TOOLSを使った横スクロールするスライドショーの作り方 30 views
  • jQueryで配列の値を個別のテキストエリアへ順番に入れていくサンプル 25 views
  • jQueryで作る縦スライドで表示するメニューの作り方 18 views
  • jQuery TOOLS jQuery.toolsで作るマウスカーソルでスライドするスライドショーの作り方 12 views
  • アウトドア&フィッシング ナチュラム

    こちらもどうぞ

  • iTunesで購入した音楽が認証・再生できないときの対処方法
  • セローにフォグランプPIAA MLSE1を付けたのでレビュー
  • Nikonの標準ズームレンズ24-85mmと24-120mmを比較してみる
  • ハーレーのミッションオイル交換手順
  • 親指AFするよー D750の親指AF設定方法