http://sdcode.dothome.co.kr/sd-main-page/index.html
이미지 나타내는 기능 만들고 있는데
코드가 너무 비효율적입니다.. 도와주세여 ㅠㅠ
function headerFade(){
$('.header-img-1').css('opacity', 1);
$('.header-img-2').css('opacity', 0);
$('.header-img-3').css('opacity', 0);
$('.header-img-4').css('opacity', 0);
}
headerFade();
setTimeout(function(){
function headerFade2(){
$('.header-img-1').css('opacity', 0);
$('.header-img-2').css('opacity', 1);
$('.header-img-3').css('opacity', 0);
$('.header-img-4').css('opacity', 0);
}
headerFade2();
},4000);
setTimeout(function(){
function headerFade3(){
$('.header-img-1').css('opacity', 0);
$('.header-img-2').css('opacity', 0);
$('.header-img-3').css('opacity', 1);
$('.header-img-4').css('opacity', 0);
}
headerFade3();
},8000);
setTimeout(function(){
function headerFade4(){
$('.header-img-1').css('opacity', 0);
$('.header-img-2').css('opacity', 0);
$('.header-img-3').css('opacity', 0);
$('.header-img-4').css('opacity', 1);
}
headerFade4();
},12000);
setInterval(()=> {
function headerFade(){
$('.header-img-1').css('opacity', 1);
$('.header-img-2').css('opacity', 0);
$('.header-img-3').css('opacity', 0);
$('.header-img-4').css('opacity', 0);
}
headerFade();
setTimeout(function(){
function headerFade2(){
$('.header-img-1').css('opacity', 0);
$('.header-img-2').css('opacity', 1);
$('.header-img-3').css('opacity', 0);
$('.header-img-4').css('opacity', 0);
}
headerFade2();
},4000);
setTimeout(function(){
function headerFade3(){
$('.header-img-1').css('opacity', 0);
$('.header-img-2').css('opacity', 0);
$('.header-img-3').css('opacity', 1);
$('.header-img-4').css('opacity', 0);
}
headerFade3();
},8000);
setTimeout(function(){
function headerFade4(){
$('.header-img-1').css('opacity', 0);
$('.header-img-2').css('opacity', 0);
$('.header-img-3').css('opacity', 0);
$('.header-img-4').css('opacity', 1);
}
headerFade4();
},12000);
}, 16000);
어떻게 짜야지 효율적으로 만들 수 있을까요..?
