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

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

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

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

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");	
}

$(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


<div class="slide">
            	<ul>
                	<li><img src="images/sample1.jpg"></li>
                    <li><img src="images/sample2.jpg"></li>
                    <li><img src="images/sample3.jpg"></li>
                    <li><img src="images/sample4.jpg"></li>
                </ul>
            </div>