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


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

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

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

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

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

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/11/04 11:08:16
  • 終了:2012/11/10 10:14:19

ベストアンサー

id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922012/11/04 11:54:18

ポイント300pt

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();
});

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

他4件のコメントを見る
id:Cherenkov

list変数を外に出して、thumbnailsのソースにゴミが混じってたので修正しました。

2012/11/05 19:04:59
id:nagato-yuki

ご回答ありがとうございます!
また、細かい修正をいただき感謝申し上げます。
Cherenkov様のおっしゃるとおり、「画像変更~」の部分は画像変更の役割として機能しております。

リンク先のコードを確認いたしました。
ページの画像表示がきれいに動いております。

度々のご助言、ありがとうございました。

2012/11/05 23:56:46

その他の回答(1件)

id:oil999 No.1

oil999回答回数1728ベストアンサー獲得回数3202012/11/04 11:34:15

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

id:Cherenkov

サムネイルがパカパカしますよ

2012/11/04 11:40:54
id:nagato-yuki

oil999様、ご質問ありがとうございます。

当方のブラウザはIE7とFirefox16.02です。
②は、「画像変更1」等のリンクを複数回クリックすると画像の変化の仕方がなにか?になってしまいます。。。

何かお気づきになりましたら、お気軽にご意見くださいませ。

2012/11/04 21:50:00
id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922012/11/04 11:54:18ここでベストアンサー

ポイント300pt

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();
});

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

他4件のコメントを見る
id:Cherenkov

list変数を外に出して、thumbnailsのソースにゴミが混じってたので修正しました。

2012/11/05 19:04:59
id:nagato-yuki

ご回答ありがとうございます!
また、細かい修正をいただき感謝申し上げます。
Cherenkov様のおっしゃるとおり、「画像変更~」の部分は画像変更の役割として機能しております。

リンク先のコードを確認いたしました。
ページの画像表示がきれいに動いております。

度々のご助言、ありがとうございました。

2012/11/05 23:56:46
id:nagato-yuki

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

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

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

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません