サイトのトップページなどで、画像のスライドショーを組み込みたいと考えています。

現在、jQueryで画像のみのスライドショーは作成できているのですが、
画像と連動するテキストボックスの表示方法がわかりません。

参考サイト:
http://www.timeout.jp/ja/tokyo

上記のサイトのように、画像のスライドショーと同時に、テキストで表示させたリンクも連動させたいです。

作動させたい内容は以下の通りです。
☆画像のスライドショー
☆画像にマウスオーバーで、スライドショーが一時ストップ、マウスアウトで再開。
☆画像と一緒にテキストボックス(リンク)の背景等が変わる。
☆テキストボックスにマウスオーバーで、該当の画像に変更、マウスアウトでスライドショー再開。
※参考サイトとほぼ同じ動きができれば幸いです。

できればjQueryで作れるものだとありがたいです。
よろしくお願いいたします。

回答の条件
  • 1人3回まで
  • 登録:
  • 終了:2012/01/13 15:47:22
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:rouge_2008 No.1

回答回数595ベストアンサー獲得回数351

ポイント100pt

次のjQuery Pluginを利用すると可能です。
http://malsup.com/jquery/cycle/download.html

・オプション一覧
http://malsup.com/jquery/cycle/options.html

次ページで日本語で紹介されていますので、参考になると思います。
http://shanabrian.com/web/library/cycle.php
http://alphasis.info/2011/07/jquery-cycle/

・HTML

<div id="slideshow">
    <a href="xxx001.html" title="XXX1"><img src="img/image1.jpg" width="420" alt="Image 1" class="active" /></a>
    <a href="xxx002.html" title="XXX2"><img src="img/image2.jpg" width="420" alt="Image 2" /></a>
    <a href="xxx03.html" title="XXX3"><img src="img/image3.jpg" width="420" alt="Image 3" /></a>
    <a href="xxx04.html" title="XXX4"><img src="img/image4.jpg" width="420" alt="Image 4" /></a>
</div>

※リンク先の説明属性である「title」を必ず指定してください。(ナビゲーションの自動出力で使用します。)

・CSS

body,div,ul { margin:0;padding:0;color:brown; }
img { border:0; }
#slideshow { position:relative;width:420px; }
#navi { position:absolute;top:351px;left:0;list-style-type:none; }
#navi li { border:1px solid #ccc;float:left;width:103px;height:30px;color:#cc6;text-align:center;padding-top:8px; }
#navi li.activeSlide { color:#fff;background-color:#888; }
#navi li.activeSlide a:link, #navi li.activeSlide a:visited { color:#fff; }
#navi li a { text-decoration:none; }
#navi li a:link { color:#8cc; }
#navi li a:visited { color:#666; }
#navi li a:hover { color:#fff; }


※スライドショーの表示幅等は、画像のサイズ等に合わせて任意で変更してください。
※背景画像ではなく背景色にしてありますので、任意の背景画像を指定してください。

・Javascript

$(function() {
    $('#slideshow').after('<ul id="navi">').cycle({
        pager:'#navi',
        pagerEvent:'mouseover',
        pagerAnchorBuilder: function(idx, slide) {
            var link = $('#slideshow > a:eq(' + idx + ')');
            return '<li><a href="' + link.attr('href') + '">' + link.attr('title') + '</a></li>';
        },
        pauseOnPagerHover:true,
        allowPagerClickBubble: true, // Pagerのリンククリックでリンク先に飛ぶ為に使用
        pause:1,
        delay:2000 // こちらは特に指定する必要はありませんが一応・・・
    });
});


※新しいブラウザではほぼ問題なく動作すると思います。(※IE7はCSSで表示を調整する必要があります。)

次のjQuery ToolsでもTabsのmouseoverによる切り替えとSlideshow Pluginを組み合わせると希望の動作になりましたが、タイミングによってはマウスオーバーしてもそのまま次に進んでしまう事もある等、若干動作が不安定でした。
興味がありましたらこちらも試してみてください。
http://flowplayer.org/tools/download/index.html

他1件のコメントを見る
id:rouge_2008

すべて可能です。
ページャー(pager)=テキストボックスになります。
ページャーはデフォルトでは数値ですが、pagerAnchorBuilderでテキストボックスを自動作成するようにしています。
さらに「pagerEvent:'mouseover'」でトリガーをクリックからマウスオーバーに変更し、「pauseOnPagerHove:true」でページャーマウスオーバーによる一時停止を有効にしています。

2012/01/12 21:36:21
id:hiropon71

rouge_2008様

ありがとうございます!
まだ実際にサイトで動かしていませんが、
ひとつずつ確認しながら作業を進めていきます。

2012/01/13 15:46:58

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません