jQuery初心者です。自作スライドショーを作りたいです。

jQuery初心者です。
自作スライドショーを作っていますが、行き詰まってしまいました。
わかる方がいましたら、ご教授の方よろしくお願いします。

私が作りたいスライドショーは紙芝居の様に、一枚目がスライドされた時に
2枚目が1枚目の下にある状態です。
そこで、行き詰まっている部分は、1枚目が3枚目の下に行く方法です。

最初はcssの方で初期値z-indexで重ね順を指定してたのですが
この方法だと、一回目のループすらできず、どんどんとz-indexの
値を変えていかないといけません。

紙芝居の用にスライドループするにはどの様に作ればよいでしょうか?
また、綺麗な書き方もあればご教授の方よろしくお願いします。
よろしくお願いします。

html

			<ul class="slider_road">
				<li class="slide"><img src="1.png" class="img1"></li>
                <li class="slide2"><img src="2.png" class="img2"></li>
                <li class="slide3"><img src="3.png" class="img3"></li>
            </ul>

css

.slider_road {
	position: absolute;
	height: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}
.slide {
	width: 320px;
	height: 300px;
	top: 0;
	left: 0;
	float: left;
	position: absolute;
	z-index: 3;
	
}
.slide2 {
	width: 320px;
	height: 300px;
	top: 0;
	left: 0;
	float: left;
	position: absolute;
	z-index: 2;
}
.slide3 {
	width: 320px;
	height: 300px;
	top: 0;
	left: 0;
	float: left;
	position: absolute;
	z-index: 1;
	
}

jQuery

var flg=2;	//「2枚目に切り替え」からスタートするため、flg に 2 をセット
	var slide = $('.slide');
	$(function(){
		setInterval(function() {
			switch(flg){
				case 1:
					//1枚目に切り替え
					$(".img3").stop().animate({marginLeft:320});
					$(".img2").stop().animate({marginLeft:0});
					break;

				case 2:
					//2枚目に切り替え
					$(".img1").stop().animate({marginLeft:320});
					$(".img3").stop().animate({marginLeft:0});
					break;
                                
                 case 3:
					//3枚目に切り替え
					$(".img2").stop().animate({marginLeft:320});
					$(".img1").stop().animate({marginLeft:0});
					
					break;
			}

			flg++;
			if(flg>3){
				flg=1;	
			}

		}, 3000);	//setInterval() 
	});

行動規範の内容に同意します

回答2件

ベストアンサー

自分ならz-indexを使わずにDOM操作でやります。

javascript
1$(function(){
2    setInterval(function() {
3        var slide = $('.slide');
4        slide.first().stop().animate({marginLeft:0});
5        slide.last().stop().animate({marginLeft:320},function(){slide.last().prependTo(slide.parent())});
6    }, 3000);    //setInterval() 
7});

CSS
1.slider_road {
2    position: absolute;
3    height: auto;
4    margin: 0;
5    padding: 0;
6    list-style: none;
7}
8.slide {
9    width: 320px;
10    height: 300px;
11    top: 0;
12    left: 0;
13    float: left;
14    position: absolute;
15}

html
1<ul class="slider_road">
2                <li class="slide"><img src="http://placehold.jp/cc9999/993333/320x300.png?text=3" class="img1"></li>
3                <li class="slide"><img src="http://placehold.jp/9999cc/333399/320x300.png?text=2" class="img2"></li>
4                <li class="slide"><img src="http://placehold.jp/320x300.png?text=1" class="img3"></li>
5            </ul>

https://jsfiddle.net/jc92f25w/

投稿2016/03/12 04:53

Lhankor_Mhy

総合スコア36074

SaekoIwaki

2016/03/12 11:30

ご返事ありがとうございます。実際に確認し、動きました! DOM操作の方法がいまいち理解出来ていませんでしたが、このような使い方があると知り大変勉強になりました。ありがとうございました!

行動規範の内容に同意します

ちょっと泥臭い方法ですが、

Javascript
1case 1:
2  //1枚目に切り替え
3  $(".slide1").css('z-index',10);
4  $(".slide2").css('z-index',1);
5  $(".slide3").css('z-index',99);
6  $(".img3").stop().animate({marginLeft:320});
7  $(".img2").css({marginLeft:0});
8  break;
9
10case 2:
11  //2枚目に切り替え
12  $(".slide1").css('z-index',99);
13  $(".slide2").css('z-index',10);
14  $(".slide3").css('z-index',1);
15  $(".img1").stop().animate({marginLeft:320});
16  $(".img3").css({marginLeft:0});
17  break;
18
19 case 3:
20  //3枚目に切り替え
21  $(".slide1").css('z-index',1);
22  $(".slide2").css('z-index',99);
23  $(".slide3").css('z-index',10);
24  $(".img2").stop().animate({marginLeft:320});
25  $(".img1").css({marginLeft:0});