<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>fade slide example</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
.fadeSlide {position: relative; height:300px;} /* 슬라이드 부모요소 */
.fadeSlide .active {z-index: 1;} /* */
#img1 {background:#ddd;width:1000px;height:300px;position: absolute;}
#img2 {background:#555;width:1000px;height:300px;position: absolute;}
#img3 {background:#333;width:1000px;height:300px;position: absolute;}
</style>
<script>
var currentImg; // 현재 이미지
var nextImg; // 다음 이미지
var timer=setInterval("fadeSlide()",3000); // 타이머 : fadeSlide함수를 3초마다 실행
function fadeSlide(){
currentImg = $(".fadeSlide div:eq(0)"); // 1번째 div
nextImg = $(".fadeSlide div:eq(1)"); // 2번째 div
nextImg.addClass("active").css("opacity",0).animate({opacity:1},1000,
/* 1. 2번째 div에 클래스 active추가하여 z-index가 1이되어 제일 상단으로 올라온다
2. 올라온 후 보이지 않게 opacity는 0으로 설정 후 opacity 1로 1초간 자연스럽게 animate된다. */
function(){
$(".fadeSlide").append(currentImg); //3. 2번째 이미지가 1번째 div로 설정되고
currentImg.removeClass("active"); // 4. 1번째 div에 클래스를 지워서 zindex가 사라지게 한다.
});
}
$(function(){
$('.fadeSlide').hover(
function(){ //mouseenter일 때
clearInterval(timer); // 변수 timer에 저장된 페이드함수를 지운다.
console.log("clear");
},
function(){ //mouseleave일 때
timer=setInterval("fadeSlide()",3000);// 변수 timer에 함수 다시 담아준다
console.log("set!");
});
});
</script>
</head>
<body>
<div id="wrap">
<div class="fadeSlide">
<div id="img1" class="active">이미지1</div>
<div id="img2">이미지2</div>
<div id="img3">이미지3</div>
</div><!--//fadeSlide-->
</div><!--//warp-->
</body>
</html>
'JAVASCRIPT&JQUERY' 카테고리의 다른 글
| [javascript] select option 홈페이지 이동기능 (0) | 2020.02.01 |
|---|---|
| [javascript] select로 탭메뉴 만들기 (0) | 2020.01.29 |
| 탭기능구현 (addClass / removeClass) (0) | 2019.07.10 |
| mega menu, full wide dropdown menu (0) | 2019.03.11 |
| 슬라이드 setInterval, clearInterval (0) | 2018.07.04 |
