묻고답하기
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에 무뇌한 질문자에게 질타 대신 멋진 답변 부탁드립니다
감사합니다!
댓글 0
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
큰성565 | 모바일스킨을 pc접속할 때 스킨으로 하기.. [3] | 2013.05.30 by 윈컴이 |
옆집옵하 | 특정그룹이 게시글 작성시 무조건 해당 게시판 상단에 등록하도록 할 수 있을까요? [1] | 2013.05.30 by 송동우 |
생각보다 |
iframe이 저절로 생깁니다.. 악성코드인가요?
[1]
![]() | 2013.05.30 by 언데드 |
아루히 |
회원 가입시에 나오는 문구 다국어
[2]
![]() | 2013.05.30 by 송동우 |
짝사랑 | 출석부 개근 일수 변경.. | |
Uknow | 에러문구 이건 모죠? [1] | 2013.05.30 by 송동우 |
야마돌끼 | xe 업데이트 질문입니다. [1] | 2013.05.30 by 송동우 |
한번만더사 |
게시판 스킨 질문이요~ 도와주세요 ㅠㅠ
[1]
![]() | 2013.05.30 by 몽실아빠 |
한번만더사 | 게시판 스킨중에요~~~~ [1] | 2013.05.30 by YEARNING |
까꿍_v | 모바일에서만 보이는 에드센스 [1] | 2013.05.30 by 몽실아빠 |
miso77 |
너무급합니다 스크린샷 찍엇습니다 도와주세요
[1]
![]() | 2013.05.30 by una_nampyeon |
moon00 | new아이콘 [1] | 2013.05.30 by 송동우 |
Uknow | 아래질문인데 이어서 하나만더 할게요 | |
Uknow | 메뉴에서 이런건 어떻게하나요? [1] | 2013.05.30 by XETheme |
gisiki | js 수정 가능하신분 있으신가요? | |
야마돌끼 | xe 설치 질문입니다. [1] | 2013.05.30 by 송동우 |
madcow | 모바일에서 로그인 후 이동페이지 [1] | 2013.05.30 by 몽실아빠 |
김준용119 | 엮인글 차단 메뉴 [1] | 2013.05.30 by 김준용119 |
명드래곤 | Firebug 1.11.4 버전 사용시 디버깅이 안되네요 ㅠ [1] | 2013.05.30 by 우진홈 |
마네트 | 회원가입이 대량으로 들어올때 [1] | 2013.05.30 by 송동우 |