• ベストアンサー
  • すぐに回答を!

続・背景と連動するスライドギャラリープラグイン

  • 質問No.7349608
  • 閲覧数236
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 55% (37/67)

恐れ入ります。
昨日も投稿しましたが、少々不具合が出ましたので再度ご質問させて頂きます。

昨日の投稿はこちらです。
http://okwave.jp/qa/q7348102.html

ご返答頂いた事で解決した様に思えましたが、不具合が見つかりましたので何とか解決策が頂けたらと思います。

不具合としては、作成したページのスライドギャラリーが隠れるくらい下の方へ行くと、スライドショーで画像が切り替わるたびにスライドギャラリーまで自動的に戻ってしまいます。
例えば5秒で切り替わるとすると、ページの下の方は5秒間しか見れない状態になってしまいます。
これではかなり問題ありなので、何とか修正をしたいのですが解決策が分かりません。

下記に使用したhtml、css、jQueryを記載します。
何かお分かりの方、よろしくお願い致します。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
#slides div.slide {
height:300px;
width:100%;
background-repeat:no-repeat;
background-position:top center;

}
#slides div.caption {
position:relative;
width:600px;
height:300px;
margin: 0 auto;
}

#slides div.content {
position:absolute;
right:0;
bottom:0;
width:200px;
height:100px;
background-color:#fff;
border:4px solid #ddd;
padding:30px;
font-weight:bold;
}
//-->
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>
</head>
<body>

<div>
<div id="slides">
<div class="slide" style="background-color:#776; background-image:url(img/photo01.jpg);">
<div class="caption"><div class="content">コメント1</div></div>
</div>
<div class="slide" style="background-color:#e84; background-image:url(img/photo02.jpg);">
<div class="caption"><div class="content">コメント2</div></div>
</div>
<div class="slide" style="background-color:#abb; background-image:url(img/photo03.jpg);">
<div class="caption"><div class="content">コメント3</div></div>
</div>
</div>
</div>


<script type="text/javascript">
<!--
$("#slides div.slide").hide().filter(":first-child").show();

var interval = setInterval(function(){
var elm = $("#slides div.slide:visible").hide().next();
(elm.length?elm:$("#slides div.slide:first-child")).fadeIn(1000);
}, 4000);

//-->
</script>
</body>
</html>

質問者が選んだベストアンサー

  • 回答No.1
  • ベストアンサー

ベストアンサー率 61% (1594/2576)

前回回答者です。

どうやら、一時的に要素が表示されないときにレイアウトし直されるようですね。


id="slides"の親要素のサイズを確保しておけばよろしいかと…
<div style="height:300px;">
 <div id="slides">
  ・・・・・
 </div>
</div>
とればどうでしょうか?


あるいは、以下でもいけるかと…
$("#slides div.slide").hide().filter(":first-child").show();

var interval = setInterval(function(){
var el = $("#slides div.slide:visible"), elm = el.next();
(elm.length?elm:$("#slides div.slide:first-child")).fadeIn(1000);
el.hide();
}, 4000);
お礼コメント
gellgugu

お礼率 55% (37/67)

昨日からお世話になっております。
早速のご返答ありがとうございます!

<div style="height:300px;">
 <div id="slides">
  ・・・・・
 </div>
</div>

こちらの方法で無事に解決しました!
とても助かりましたし、良い勉強になりました。
本当にありがとうございました!
投稿日時:2012/03/08 14:18
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A

ピックアップ

ページ先頭へ