안녕하세요?
이미지 5개 정도가 부드럽게 자동으로 전환될수 있는 소스나 방법을 구합니다.
아시는 분 계시면 도움주시면 감사하겠습니다.
링크는 필요없고 그냥 자동으로 페이드인-아웃 되면서 부드럽게 전환되면 좋겠습니다.
수고하세요~~
|
답변 2개
채택된 답변
+20 포인트
2015-02-16 (월) 15:57:10
Copy
<!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)값은 이미지에 맞게 수정하시면 되겠습니다.
불량학생™
2015-02-16 (월) 09:32:08
구글에서 " jquery 슬라이드 " 검색해보세요
답변을 작성하려면 로그인이 필요합니다.