묻고답하기
js 수정 가능하신분 있으신가요?
2013.05.30 16:09
$(document).ready(function() {
count=$('.img_s').length;
num=0;
var timeid2;
var ww=-1003;
$("#main_slider").append('<div id="btn"><div id="btn_left"><img src="images/slide/btn_left.png"/></div><div id="btn_right"><img src="images/slide/btn_right.png"/></div></div>'); //왼쪽버튼 생성
$("#main_slider").append('<div id="imgbtn"><div id="imgbtn_1"><img src="images/slide/imgbtn1.png"/></div><div id="imgbtn_2"><img src="images/slide/imgbtn2.png"/></div><div id="imgbtn_3"><img src="images/slide/imgbtn3.png"/></div><div id="imgbtn_4"><img src="images/slide/imgbtn4.png"/></div></div>'); //왼쪽버튼 생성
function movie1(){
num=1;
$('.img_s:eq(0)').stop(true, true).fadeTo('slow',1, function() {
$(this).animate({top : 0,opacity:1}, {queue : false, duration : 1000}).animate({},{easing : 'easeInOutExpo'}, 500).animate({opacity:1}, 1000).animate({},{complete:function(){
$(this).append('<div id="img1_1"><img src="images/slide/1_1.png"/>"</div>');
$(this).append('<div id="img1_2"><img src="images/slide/1_2.png"/>"</div>');
$('#img1_1').stop(true, true).delay(1000).fadeTo('fast',0, function() {
$(this).animate({opacity:1,left:430},{duration:500,complete:function(){
$('#img1_2').stop(true, true).fadeTo('fast',0, function() {
$(this).animate({opacity:1,top:290},{duration:300,complete:function(){
$('.img_s').show();
}
});
});//img1_2 end
}
});
}); //#img1_1
}
});
});
}
function movie2(){
$('#btn_left').stop(true, true).fadeTo('fast',0, function() {
$(this).animate({opacity:1,marginLeft:40},{duration:500,complete:function(){
}
});
});
$('#btn_right').stop(true, true).fadeTo('fast',0, function() {
$(this).animate({opacity:1,marginLeft:940},{duration:500,complete:function(){
}
});
});
/*$('#imgbtn_1').stop(true, true).fadeTo('fast',0, function() {
$(this).animate({opacity:1,bottom:30},{duration:500,complete:function(){}
});
});
$('#imgbtn_2').stop(true, true).delay(50).fadeTo('fast',0, function() {
$(this).animate({opacity:1,bottom:30},{duration:500,complete:function(){}
});
});
$('#imgbtn_3').stop(true, true).delay(100).fadeTo('fast',0, function() {
$(this).animate({opacity:1,bottom:30},{duration:500,complete:function(){}
});
});
$('#imgbtn_4').stop(true, true).delay(150).fadeTo('fast',0, function() {
$(this).animate({opacity:1,bottom:30},{duration:500,complete:function(){}
});
});*/
};
function movie3(){
$(".img_s:eq(0)").animate({opacity:1,marginLeft:-1003},{duration:1000,complete:function(){}});
}
function movie4(){
num=2;
$('.img_s:eq(1)').stop(true, true).fadeTo('slow',1, function() {
$(this).animate({top : 0,opacity:0.5}, {queue : false, duration : 1000}).animate({},{easing : 'easeInOutExpo'}, 500).animate({opacity:1}, 1000).animate({},{complete:function(){
$(this).append('<div id="img2_1" style="top:225px;position:absolute;display:none; left:1470px;"><img src="images/slide/2_1.png"/>"</div>');
$(this).append('<div id="img2_2" style="top:270px;position:absolute;display:none; left:1470px;"><img src="images/slide/2_2.png"/>"</div>');
$('#img2_1').stop(true, true).fadeTo('fast',0, function() {
$(this).animate({opacity:1,left:1470},{duration:300,complete:function(){
$('#img2_2').stop(true, true).fadeTo('fast',0, function() {
$(this).animate({opacity:1,top:280},{duration:300,complete:function(){
}
});
});//img1_2 end
}
});
}); //#img1_1
}
});
});
}
function m_left(cnt){
$(".img_s:eq("+cnt+")").animate({opacity:1,marginLeft:0},{duration:1000,complete:function(){
}});
};
function m_right(cnt){
$(".img_s:eq("+cnt+")").animate({opacity:1,marginLeft:-1003},{duration:1000,complete:function(){
}});
};
cnttime = setTimeout(function() {
movie2();
}, 500);
/* $("#btn_left").hover(function(e) {
movepaly=false;
if(cnttime2) clearTimeout(cnttime2);
},function(e){
movepaly=true;
cnttime2 = setTimeout(cnttime2, 100);
});*/
$("#btn_left").click(function(e) {
if(cnttime1) clearTimeout(cnttime1);
if(cnttime4) clearTimeout(cnttime4);
if(num==2){
$("#img1_1").css({"top":"220px","display":"none","left":"450px"})
$("#img1_2").css({"top":"280px","display":"none","left":"440px"})
$("#img2_1").css({"top":"225px","display":"none","left":"1470px"})
$("#img2_2").css({"top":"270px","display":"none","left":"1470px"})
$('#imgul').animate({opacity:1,left:0},{duration:1000,complete:function(){num=1}});
cnttime1 = setTimeout(function() {
movie1();
}, 100);
}
else
{
num=1;
$("#img1_1").css({"top":"220px","display":"none","left":"450px"})
$("#img1_2").css({"top":"280px","display":"none","left":"440px"})
$("#img2_1").css({"top":"225px","display":"none","left":"1470px"})
$("#img2_2").css({"top":"270px","display":"none","left":"1470px"})
$('#imgul').animate({opacity:1,left:-1003},{duration:1000,complete:function(){num=2}});
cnttime3 = setTimeout(function() {
movie4();
}, 100);
}
});
$("#btn_right").click(function(e) {
if(cnttime1) clearTimeout(cnttime1);
if(cnttime4) clearTimeout(cnttime4);
if(num==1){
$("#img1_1").css({"top":"220px","display":"none","left":"450px"})
$("#img1_2").css({"top":"280px","display":"none","left":"440px"})
$("#img2_1").css({"top":"225px","display":"none","left":"1470px"})
$("#img2_2").css({"top":"270px","display":"none","left":"1470px"})
$('#imgul').animate({opacity:1,left:-1003},{duration:1000,complete:function(){num=2}});
cnttime3 = setTimeout(function() {
movie4();
}, 100);
}
else
{
num=2;
$("#img1_1").css({"top":"220px","display":"none","left":"450px"})
$("#img1_2").css({"top":"280px","display":"none","left":"440px"})
$("#img2_1").css({"top":"225px","display":"none","left":"1470px"})
$("#img2_2").css({"top":"270px","display":"none","left":"1470px"})
$('#imgul').animate({opacity:1,left:0},{duration:1000,complete:function(){num=1}});
cnttime1 = setTimeout(function() {
movie1();
}, 100);
}
});
autoslider();
function autoslider()
{
cnttime1 = setTimeout(function() {
movie1();
}, 500);
cnttime2 = setTimeout(function() {
$('#imgul').animate({opacity:1,left:ww},{duration:1000,complete:function(){}});
}, 6000);
cnttime3 = setTimeout(function() {
movie4();
}, 8000);
cnttime4 = setTimeout(function() {
$("#img1_1").css({"top":"220px","display":"none","left":"450px"})
$("#img1_2").css({"top":"280px","display":"none","left":"440px"})
$("#img2_1").css({"top":"225px","display":"none","left":"1470px"})
$("#img2_2").css({"top":"270px","display":"none","left":"1470px"})
$('#imgul').animate({opacity:1,left:0},{duration:1000,complete:function(){}});
}, 15000);
/* if(j==imgcnt){
j=0;
}*/
if(timeid2) clearTimeout(timeid2);
timeid2 = setTimeout(autoslider, 15000);
//var move=true;
}
}); //ready end
-----------------------------------------------------------------------------------------------
보신바와 같이 현재 2개의 이미지가 슬라이드중인 js 명령입니다
이미지를 점차 추가하여 슬라이드를 시키려고 하는데 여기서 어떻게 무얼 변경해야지
이미지가 추가적으로 슬라이드가 되는지 알고 싶습니다
누군가에겐 쉽고 간편할 수 있습니다 js에 무뇌한 질문자에게 질타 대신 멋진 답변 부탁드립니다
감사합니다!
