html内にスライドショーを複数設置

締切済

質問者：aaaaym
質問日時：2013/09/04 03:28
回答数：3件

こんにちは、質問があります。

http://allabout.co.jp/gm/gc/417216/3/

↑のサイトさんに載っているコードを参考に、スライドショーをhtml内に書きました。html内にスライドショーを複数設置をしたいので、#slideshow の部分を#slideshow2や#slideshow3にしたりしたのですが、スライドショーが#slideshow3の部分しか動きません。全てのスライドショーを同時に動かすにはどうしたらいいのでしょうか？当方初心者なので分からないのです。どなたか教えていただけるとうれしいです。

以下が書いたコードです。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></sc …
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow img.active');
var $active = $('#slideshow2 img.active');
var $active = $('#slideshow3 img.active');

if ( $active.length == 0 ) $active = $('#slideshow,#slideshow2,#slideshow3 img:last');

var $next = $active.next().length ? $active.next()
: $('#slideshow,#slideshow2,#slideshow3 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()", 2000 );
});

</script>

<p id="slideshow">
<img src="img/slide1.jpg" alt="" />
<img src="img/slide2.jpg" alt=""/>
<img src="img/slide3.jpg" class="active" />
</p>

<p id="slideshow2">
<img src="img/slide4.jpg" alt="" />
<img src="img/slide5.jpg" alt=""/>
<img src="img/slide6.jpg" class="active" /></p>

<p id="slideshow3">
<img src="img/slide7.jpg" alt="" />
<img src="img/slide8.jpg" alt=""/>
<img src="img/slide9.jpg" class="active" /></p>

どなたか回答よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： fujillin
回答日時：2013/09/04 20:12

ANo1、2です。

aaaaymさんが作成なさったコードではなく、参照先のコードをひとつのセットとしてそれを必要なだけ（idや名前等を替えて）設置してくださいという意味です。
具体的には、もとのコードが
　function slideSwitch() {
　　　～～～～～～～
　}
　setInterval(slideSwitch, 2100 );
という構成になっているとすれば、2個目は、

　function slideSwitch2() {
　　　～～～～～～～
　}
　setInterval(slideSwitch2, 2100 );
といった按配です。（もちろんidその他も変更してください）

この方法だと、何十個もあると面倒なことになるので、個別に制御したい要素（例として、対象要素、切替わり時間、切替わり間隔）を可変にできるようにしておいて、必要な回数呼び出せば良いというような発想になるかと思います。

以下、書きっぱなしの例なので、かなりいい加減ですが…
（切替えの方法なども、ご参考のサイトとは少し変えています）
<!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">
.slideshow { position:relative; }
.slideshow img{ position:absolute; top:0; left:0; display:none; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9. …
<script type="text/javascript">
$(function(){
var SS = function(e, s, i){
　this.speed = s;
　this.interval = i;
　this.index = 0;
　this.elements = $("img", e);
}
SS.init = function(e){
　var img = this.elements.eq(0);
　e.addClass("slideshow")
　　.css({width:img.width(), height:img.height()});
　img.show();
}

SS.prototype = {
　change : function(){
　　this.elements.eq(this.index++).fadeOut(this.speed);
　　this.index %= this.elements.length;
　　this.elements.eq(this.index).fadeIn(this.speed);
　},
　start : function(){
　　var obj = this;
　　if(!obj.slideID)
　　　obj.slideID = setInterval(function(){ obj.change()}, obj.interval);
　},
　stop : function(){
　　clearInterval(this.slideID);
　　this.slideId = null;
　}
}

var SlideShow = function(id, fadeSpeed, interval){
　var e = $("#" + id);
　var s = new SS(e, fadeSpeed, interval);
　SS.init.call(s, e);
　return s;
}

// ----------------------------------
/* arguments : elementID, fadeDuration, timerInterval */
SlideShow("slideshow1", 400, 2000).start();
SlideShow("slideshow2", 1200, 3000).start();

});
</script>

</head>
<body>

<div id="slideshow1">
<img src="img/photo01.jpg" alt="">
<img src="img/photo02.jpg" alt="">
<img src="img/photo03.jpg" alt="">
</div>

<div id="slideshow2">
<img src="img/photo01.jpg" alt="">
<img src="img/photo02.jpg" alt="">
<img src="img/photo03.jpg" alt="">
<img src="img/photo04.jpg" alt="">
<img src="img/photo05.jpg" alt="">
</div>

</body>
</html>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。

fujillinさんが書いて下さったコードを参考にしたところ、個々のスライドが動くようになりました！！解決できてうれしいです！！詳しく書いて下さって本当にありがとうございます！！

通報する

お礼日時：2013/09/06 10:57

No.2

回答者： fujillin
回答日時：2013/09/04 13:44

ANo1です。

＞それぞれに対して処理されるように書くにはどうすればいいのでしょうか？
＞詳しく教えていただけないでしょうか？

一番簡単な方法は、同じ内容を名前を変えて必要な回数だけ記述する方法です。

もう少し効率的・効果的に行なおうとするなら、
　処理を、対象を引数とする関数にしておいて、必要な回数だけ呼び出す。
　機能をオブジェクト化しておいて、必要なだけインスタンスを作成する。
などの方法が考えられます。
こちらの方法については説明が長くなるので、検索などして調べてみてください。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。
ANo1さんの仰ったようにしてみました。

<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow img.active');
　var $active2 = $('#slideshow2 img.active2');

if ( $active.length == 0 ) $active = $('#slideshow img:last');
if ( $active2.length == 0 ) $active2 = $('#slideshow2 img:last');

var $next = $active.next().length ? $active.next()
: $('#slideshow img:first');

var $next = $active2.next().length ? $active2.next()
: $('#slideshow2 img:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});

$active2.addClass('last-active');

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active2.removeClass('active2 last-active');
});
}

$(function() {
setInterval( "slideSwitch()", 2000 );
});

</script>

<p id="slideshow">
<img src="img/slide1.jpg" alt="" />
<img src="img/slide2.jpg" alt=""/>
<img src="img/slide3.jpg" class="active" />
</p>

<p id="slideshow2">
<img src="img/slide4.jpg" alt="" />
<img src="img/slide5.jpg" alt=""/>
<img src="img/slide6.jpg" class="active2" /></p>

こういうことで合っているのでしょうか？二番目のスライドのactive名を変更して入力をしてみても片方のみしか正常に動かないです・・・。
間違っている場所のご指摘をお願いしたいです・・・。

ご回答お願いいたします。

通報する

お礼日時：2013/09/04 15:30

No.1

回答者： fujillin
回答日時：2013/09/04 08:56

最初の

＞var $active = $('#slideshow img.active');
＞var $active = $('#slideshow2 img.active');
＞var $active = $('#slideshow3 img.active');
を実行した時点で、変数$activeには最後の#slideshow3に関する値が入っていることになりますので、その後の処理で$activeを参照しても、常に#slideshow3に関する処理だけが行なわれることになります。
このため、ご質問のような結果になっているのでしょう。

同時に処理したいのなら、それぞれのラッパーに対して処理されるようにしてあげればよろしいかと。