답변 2개
채택된 답변
+20 포인트
10년 전
</p><p><!doctype html></p><p><html>
<head>
<meta charset="utf-8">
<title> fadeInOut 갤러리 </title>
<code class="snippet"><script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js</a>"></script></code>
<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;}</p><p>.fadeShow .active{
z-index:1;
}
</style>
</head></p><p><body></p><p><div class="fadeShow">
<img class="active" src="slide1.jpg" alt="image1" />
<img src="slide2.jpg" alt="image2" />
<img src="slide3.jpg" alt="image3" />
</div></p><p>
<!---------- jQuery code Start ---------->
<script>
var showImg, nextImg;</p><p>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);</p><p>$("div.fadeShow").hover(
function() {
clearInterval(timer)
},
function(){
timer = setInterval("fadeInOut()",2000);
}
);
</script>
</body>
</html></p><p>이 코드를 이용해서 적용해 보세요.
이미지 파일명과 경로, 크기(widthl, height)값은 이미지에 맞게 수정하시면 되겠습니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인