부드럽게 자동 전환되는 이미지 소스
본문
안녕하세요?
이미지 5개 정도가 부드럽게 자동으로 전환될수 있는 소스나 방법을 구합니다.
아시는 분 계시면 도움주시면 감사하겠습니다.
링크는 필요없고 그냥 자동으로 페이드인-아웃 되면서 부드럽게 전환되면 좋겠습니다.
수고하세요~~
답변 2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> fadeInOut 갤러리 </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
body {
margin:20px auto;
padding:0;
width:620px;
background:#192839;
}
.fadeShow {
background:#666;
width:600px;
height:350px;
border:2px solid #FDF6DD;
}
.fadeShow img{position:absolute;}
.fadeShow .active{
z-index:1;
}
</style>
</head>
<body>
<div class="fadeShow">
<img class="active" src="slide1.jpg" alt="image1" />
<img src="slide2.jpg" alt="image2" />
<img src="slide3.jpg" alt="image3" />
</div>
<!---------- jQuery code Start ---------->
<script>
var showImg, nextImg;
function fadeInOut(){
showImg = $(".fadeShow img:eq(0)");
nextImg = $(".fadeShow img:eq(1)");
nextImg.addClass("active");
nextImg.css("opacity","0")
.animate({opacity:1},1000, function() {
$(".fadeShow").append( showImg );
showImg.removeClass("active");
});
}
var timer = setInterval("fadeInOut()",3000);
$("div.fadeShow").hover(
function() {
clearInterval(timer)
},
function(){
timer = setInterval("fadeInOut()",2000);
}
);
</script>
</body>
</html>
이 코드를 이용해서 적용해 보세요.
이미지 파일명과 경로, 크기(widthl, height)값은 이미지에 맞게 수정하시면 되겠습니다.
구글에서 " jquery 슬라이드 " 검색해보세요
답변을 작성하시기 전에 로그인 해주세요.
