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で作るより画像の入れ替えやリンク先の変更などのメンテナンスが楽ちん。
