본문 바로가기

Programming/JavaScript

Jquery. 슬라이드 배너

$(document).ready(function() {

$(".banner").each(function(){

var ul = $(this).find("ul");

ul.prepend($(this).find("li:last-child")); // ul에 li의 마지막번째를 찾아서 앞에 붙인다.

ul.css("margin-left","-150px"); // 처음의 li가 보이기위해 margin-left 를 -150준다.


});

window.setInterval(function(){ 

var v = $(this).parents("div").index(); // 각 div 인덱스 값

var point = $(".develop").eq(v).find("ul"); // ul의 위치 


if ($(".develop").eq(v).find("ul:animated").length < 1 ) {

point.animate({"margin-left": "-300px"},function(){ //초기값을 -150을 준 상태로 -300을 줘야 두번째 이미지로 이동. 

point.append(point.find("li:first-child")); // 옮겨놓은 첫번째이미지를 다시 마지막으로 옮긴다.

point.css("margin-left","-150px"); // 후에 다시 두번째 이미지에 맞는 margin-left값을 준다.

});

}

}, 4000);


$(".banner1").each(function(){

var ul1 = $(this).find("ul");

ul1.prepend($(this).find("li:last-child")); // ul에 li의 마지막번째를 찾아서 앞에 붙인다.

  ul1.css("margin-left","-150px"); // 처음의 li가 보이기위해 margin-left 를 -150준다.


});

window.setInterval(function(){ 

var v1 = $(this).parents("div").index(); // 각 div 인덱스 값

var point1 = $(".maintain").eq(v1).find("ul"); // ul의 위치 


if ($(".maintain").eq(v1).find("ul:animated").length < 1 ) {

point1.animate({"margin-left": "-300px"},function(){ //초기값을 -150을 준 상태로 -300을 줘야 두번째 이미지로 이동. 

point1.append(point1.find("li:first-child")); // 옮겨놓은 첫번째이미지를 다시 마지막으로 옮긴다.

point1.css("margin-left","-150px"); // 후에 다시 두번째 이미지에 맞는 margin-left값을 준다.

});

}

}, 4000);