メインビジュアルを自動でゆっくりスライドさせて流す方法②

前回に引き続きのテーマですが、
今回は方法がちょっと違います。

前回は、背景画像をスライドさせる形でしたが、
今回は、ul,liタグ使い、写真を複数置いたビジュアルをスライドさせた形になります。

それでは、DEMOをご覧下さい。

margin-leftを使用し、ulをずらしています。
見えなくなった先頭の要素を一番後ろに入れて、、
というの繰り返して無限ループになるようになってます。

以下、javascritになります。


$(function(){
	setInterval("photoslide()", 50);	
});

var current = 0;
function photoslide(){
	current -= 1;
	//先頭の写真が見えなくなった時の処理
	if(current == -400){
		var copy = $(".slide ul li:first").clone();
		$(".slide ul li:first").remove();
		$(".slide ul").append(copy);
		current = 0;
		
	};
	
	$('.slide ul').css("margin-left", current+"px");	
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

$(function(){

setInterval("photoslide()", 50);

});

var current = 0;

function photoslide(){

current -= 1;

//先頭の写真が見えなくなった時の処理

if(current == -400){

var copy = $(".slide ul li:first").clone();

$(".slide ul li:first").remove();

$(".slide ul").append(copy);

current = 0;

};

$('.slide ul').css("margin-left", current+"px");

}

HTML


&lt;div class="slide"&gt;
            	&lt;ul&gt;
                	&lt;li&gt;&lt;img src="images/sample1.jpg"&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;img src="images/sample2.jpg"&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;img src="images/sample3.jpg"&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;img src="images/sample4.jpg"&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;

1

2

3

4

5

6

7

8

<ul>