OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
締切り
済み

JQUERY slideshowについて

  • すぐに回答を!
  • 質問No.6817993
  • 閲覧数671
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 0% (0/5)

slide-show.jsについての質問です。
ホームページのトップイメージにスライドショーで3枚の写真を動かしています。
で、トップページの写真を9枚にして、左3枚・真ん中3枚・右3枚というふうに動かしたいです。

トップイメージの写真(幅900px)3枚を

トップイメージの写真(幅300px)×3を3枚スライドにする

(意味不明ですか・・・)


下の#slideshow01を#slideshow02、#slideshow03に増やして、設置したら動きませんでした。

出来れば、右→真ん中→左がちょっと時差をつけてスライドして欲しいです。
写真の切り替えは、CSSのZーindexを使っています。


現在のHTML

<div id='slideshow01'>
<!--スライドショーの3枚ここ!-->
<img src="upimg/results/flash_1.jpg" alt="" width="300" height="400" />
<img src="upimg/results/flash_2.jpg" alt="" width="300" height="400" />
<img src="upimg/results/flash_3.jpg" alt="" width="300" height="400" />
<!--スライドショーの3枚終わり-->
</div>


求めるHTML
<div id='slideshow01'>
<!--スライドショーの3枚ここ!-->
<img src="upimg/results/flash_1.jpg" alt="" width="300" height="400" />
<img src="upimg/results/flash_2.jpg" alt="" width="300" height="400" />
<img src="upimg/results/flash_3.jpg" alt="" width="300" height="400" />
<!--スライドショーの3枚終わり-->
</div>
<div id='slideshow02'>
<!--スライドショーの3枚ここ!-->
<img src="upimg/results/flash_4.jpg" alt="" width="300" height="400" />
<img src="upimg/results/flash_5.jpg" alt="" width="300" height="400" />
<img src="upimg/results/flash_6.jpg" alt="" width="300" height="400" />
<!--スライドショーの3枚終わり-->
</div>
<div id='slideshow03'>
<!--スライドショーの3枚ここ!-->
<img src="upimg/results/flash_7.jpg" alt="" width="300" height="400" />
<img src="upimg/results/flash_8.jpg" alt="" width="300" height="400" />
<img src="upimg/results/flash_9.jpg" alt="" width="300" height="400" />
<!--スライドショーの3枚終わり-->
</div>




この js を使っています。

function slideSwitch() {
var $active = $('#slideshow01 img.active');
if ( $active.length == 0 ) $active = $('#slideshow01 img:last');
var $next = $active.next().length ? $active.next() : $('#slideshow01 img:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 4000 );
});
通報する
  • 回答数1
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

回答 (全1件)

  • 回答No.1
レベル14

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

よくわかってませんけれど、こんな感じ? (グループ数制限なし、グループ内の画像枚数制限なし) (全角空白は半角に) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> ...続きを読む
よくわかってませんけれど、こんな感じ?
(グループ数制限なし、グループ内の画像枚数制限なし)

(全角空白は半角に)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
#slideshow01 img { width: 300px; height:400px; }
#slideshow02 img { width: 200px; height:100px; }
#slideshow03 img { width: 400px; height:300px; }
</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.5");</script>
<script type="text/javascript">
<!--
var slideSwitch = (function($){
 var slide = function(id, interval){
  this.elements = $("#" + id).children("img");
  this.interval = Math.max(interval, 1200);
  this.intervalId = null;
 }

 var fade = function(obj){
  return function(){ fader.call(obj); }
 }

 var fader = function(){
  var elm = this.elements, active = elm.filter(".active");
  var next = active.next("img:first");
  if(!next.length) next = elm.filter(":first");
  active.removeClass("active").fadeOut(500, function(){
   next.addClass("active").fadeIn(500);
  });
 }

 var init = function(id, interval){
  var ss = new slide(id, interval), elm = ss.elements;
  if(!elm.filter(".active").length)
   elm.filter(":first").addClass("active");
  elm.not(".active").hide();
  ss.intervalId = setInterval(fade(ss), ss.interval);
  return ss;
 }
 return init;
})(jQuery);


// 設定部分(対象要素のid, 切替間隔(msec))
$(function(){
 slideSwitch("slideshow01", 4000);
 slideSwitch("slideshow02", 4500);
 slideSwitch("slideshow03", 5000);
});

//-->
</script>
</head>
<body>

<div id="slideshow01">
<img src="A.jpg" alt="">
<img src="B.jpg" alt="">
<img src="C.jpg" alt="">
</div>

<div id="slideshow02">
<img src="D.jpg" alt="">
<img src="E.jpg" alt="">
<img src="F.jpg" alt="">
</div>

<div id="slideshow03">
<img src="G.jpg" alt="">
<img src="H.jpg" alt="">
<img src="I.jpg" class="active" alt="">
</div>

</body>
</html>


このQ&Aのテーマ
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ