728x90
반응형
이전/다음 버튼이 없는 단순한 자동 롤링 이미지입니다.
1. <head> </head> 태그 안에 제이쿼리를 불러옵니다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
2. CSS
ul, li { list-style: none; }
.rolling_box { position: relative; width: 800px; height: 400px; }
.rolling_box li { position: absolute; top: 0; left: 0; }
3. HTML
<ul class="rolling_box">
<li><img src="이미지경로" alt="" /></li>
<li><img src="이미지경로" alt="" /></li>
<li><img src="이미지경로" alt="" /></li>
</ul>
4. Script
<script type="text/javascript">
$(document).ready(function(){
var rolltime = 2000; /* 롤링 시간 */
var fadetime = 1000; /* 페이드 인아웃 시간 */
var $rollimg = $(".rolling_box > li");
$rollimg.not(":first").hide();
setInterval(rolling, rolltime);
function rolling()
{
$visible_img = $rollimg.filter(":visible");
$visible_img.fadeOut(fadetime);
$next_img = $visible_img.next();
if ($next_img.length === 0) {
$next_img = $rollimg.filter(":first");
}
$next_img.fadeIn(fadetime);
}
});
</script>
728x90