人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryを使用したスライドショーの表示について

今回、jQueryを使用したスライドショーの表示について質問します。
とあるサイトのjQueryスライドショー作成記事を拝見し、以下のページを作成しました。
http://kotenbu.sakura.ne.jp/a.html ?

?のページを読み込むとスライドショーが開始されます。
しかし、「画像変更1」等のリンクをクリックしてスライドショー内の画像を変えた場合、画像変更後のスライドショーが開始されません。

そこで、画像を変更した後にスライドショーを行うようなページを作成しました。
http://kotenbu.sakura.ne.jp/b.html ?

?のページではスライドショーは開始されますが、「画像変更1」等を複数回クリックした場合、画像の変化の仕方がなにか?です。

今回は、画像を変更した後でも上手くスライドショーが開始され、違和感のない画像切り替えのできるコードをご教授いただければと存じます。
この現象の原因もご教授いただけると幸いです。

もちろん、他に良い方法があればお気軽にご意見いただければと存じます。
長文失礼いたしました。どうぞよろしくお願いいたします。

●質問者: nagato-yuki
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● oil999
●0ポイント

?の方ですが、IE9, Firefox16.02, Chrome22.0では正常に動きます。
不具合が起きているブラウザとバージョン番号をお知らせください。


Cherenkovさんのコメント
サムネイルがパカパカしますよ

nagato-yukiさんのコメント
oil999様、ご質問ありがとうございます。 当方のブラウザはIE7とFirefox16.02です。 ?は、「画像変更1」等のリンクを複数回クリックすると画像の変化の仕方がなにか?になってしまいます。。。 何かお気づきになりましたら、お気軽にご意見くださいませ。

2 ● Cherenkov
●300ポイント ベストアンサー

http://jsfiddle.net/cherenkov/JB9q3/2/
https://gist.github.com/4013848

var list = {
 '1': {
 images: [
 '<a href="#1"><img src="http://kotenbu.sakura.ne.jp/img/photo01.jpg" width="400px" height="300px" alt="" /></a>',
 '<a href="#2"><img src="http://kotenbu.sakura.ne.jp/img/photo02.jpg" width="400px" height="300px" alt="" /></a>',
 '<a href="#3"><img src="http://kotenbu.sakura.ne.jp/img/photo03.jpg" width="400px" height="300px" alt="" /></a>',
 '<a href="#4"><img src="http://kotenbu.sakura.ne.jp/img/photo04.jpg" width="400px" height="300px" alt="" /></a>'
 ],
 thumbnails: [
 '<img src="http://kotenbu.sakura.ne.jp/img/photo01.jpg" width="100px" height="75px" alt="" />',
 '<img src="http://kotenbu.sakura.ne.jp/img/photo02.jpg" width="100px" height="75px" alt="" />',
 '<img src="http://kotenbu.sakura.ne.jp/img/photo03.jpg" width="100px" height="75px" alt="" />',
 '<img src="http://kotenbu.sakura.ne.jp/img/photo04.jpg" width="100px" height="75px" alt="" />'
 ]
 },
 '2': {},
 '3': {}
};
$("a.change").click(function() {
 var selectList = list[this.name];
 $("#slideshow div div").each(function(i) {
 $(this).html(selectList['images'][i]);
 });
 $("#slideshow ul li").each(function(i) {
 $(this).html(selectList['thumbnails'][i]);
 });

 //選択位置を始めに戻す
 $("#slideshow ul li:first").click();
});

こんな感じで画像を入れ替えるようにしてみてはどうでしょう。


nagato-yukiさんのコメント
Cherenkov様、ご回答ありがとうございます。 ?をベースに修正していただき、またとても参考になる回答に感謝いたします。 li要素をjQueryでクリックするところがポイントですね! 本日は、ご回答いただきましてありがとうございました。

Cherenkovさんのコメント
「画像変更?」がアルバム切り替えの役割りだったんですね。勘違いしてました。

Cherenkovさんのコメント
回答を修正しました。 画像を入れ替える仕組みを変更しました。

Cherenkovさんのコメント
list変数は$("a.change").click(function() {の外に出したほうがいいか。

Cherenkovさんのコメント
list変数を外に出して、thumbnailsのソースにゴミが混じってたので修正しました。

nagato-yukiさんのコメント
ご回答ありがとうございます! また、細かい修正をいただき感謝申し上げます。 Cherenkov様のおっしゃるとおり、「画像変更?」の部分は画像変更の役割として機能しております。 リンク先のコードを確認いたしました。 ページの画像表示がきれいに動いております。 度々のご助言、ありがとうございました。

質問者から

?ページのスライドショーにおいてのご意見お待ちしております。

わがままな意見で恐縮でございますが、?ページの「画像変更1」等のリンクをクリックしてスライドショー内の画像を変えた場合、ページを読み込んで最初に開始されるスライドショーのように、画像が左端より右端へ変化するような感じにしていただければと存じます。


関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ