fade 효과 - setInterval( ) - 2가지 이미지 깜빡이며 보이기

 

서로다른 이미지 깜박이며 노출

 

HTML

<div id="wrap">
  <div class="fade_container">
    <img class="active" src="http://sevensprings.dothome.co.kr/img/4.jpg" alt="image1" />
    <img src="http://sevensprings.dothome.co.kr/img/5.jpg" alt="image2" />
    <img src="http://sevensprings.dothome.co.kr/img/6.jpg" alt="image3" />
  </div>
</div>

 

CSS

body {
  background-color:#111;
}
#wrap{
  margin:30px auto;
  width:600px;
}
.fade_container { 
  position:relative;
  width:600px; 
  height:350px; 
  border:2px solid gold;    
}
.fade_container img{
  position:absolute;
  width:100%;
  height:100%;
}
.fade_container img:nth-child(1){
  background-color:#fff;
}
.fade_container img:nth-child(2){
  background-color:red;
}
.fade_container img:nth-child(3){
  background-color:blue;
}
.fade_container .active{
  z-index:1;
}

 

JS

var now_img, next_img;
function fade_change(){
    now_img = $(".fade_container img:eq(0)");
    next_img = $(".fade_container img:eq(1)");
    next_img.addClass("active").css("opacity",0).animate({"opacity":1},1000, function(){
        $(".fade_container").append(now_img);			//콜백
        now_img.removeClass("active");
    });
}


/*
  fade_change() 함수를 순환시키는 timer 설정
  mouse hover 로 애니메이션 멈춤/재생   
*/
var timer = setInterval("fade_change()",4000);
$("div.fade_container").hover(function(){		// mouse enter
    clearInterval(timer);
}, function(){									// mouse leave
    timer = setInterval("fade_change()",4000);
});

 

코드적용

https://codepen.io/gamza/pen/QgaRqY