본문 바로가기

개 발코딩

[jquery] delay 없이 서서히 움직이는 가로 롤링 배너

오늘 설명할 배너는 오른쪽에서 왼쪽으로 중간에 멈추지 않고 계속 이동하는 배너이다.

정말 매우매우 심플한 소스다.


원리도 복잡하지 않다. 이제 아래 그림을 가지고 설명하다.




원리는 간단하다. 위에 그림처럼 보이는 제일 왼쪽의 배너가 보이지 않는 영역으로 들어가서 정해진 위치에 가면 제일 오른쪽 배너의 뒤에 넣는다.


아래는 HTML 소스이다.


<div class="banner_wraper">
<img src="seongnam.png">
<img src="lguplus.png">
<img src="encar.png">
<img src="ewp.png">
<img src="pulmuone.jpg">
<img src="hyosung.png">
<img src="sangmyung.png">
<img src="hanmiit.png">

</div>

위와 같이 div 태그로 배너 img 태그들을 감싼다.



아래는 CSS 소스이다.

<style>


.banner_wraper { height: 60px; width: 1130px; position: absolute; overflow: hidden; }
.banner_wraper img { height: 45px; position: absolute; }


</style>

위와 같이 div와 img 둘다 position을 absolute로 해준다. 그리고 모든 배너들의 높이를 똑같이 45px로 해준다. 그래야 정돈되게 보이니까~!!!! 정말 매우 간단하다.



이제 대망의 javascript(JQUERY) 소스다.


<script type="text/javascript">

            //client rolling banner
window.onload = function() {
var bannerLeft=0;
var first=1;
var last;
var imgCnt=0;
var $img = $(".banner_wraper img");
var $first;
var $last;

$img.each(function(){ // 5px 간격으로 배너 처음 위치 시킴
$(this).css("left",bannerLeft);
bannerLeft += $(this).width()+5;
$(this).attr("id", "banner"+(++imgCnt)); // img id 속성 추가
});


if( imgCnt > 9){ //배너 9개 이상이면 이동시킴


last = imgCnt;

setInterval(function() {
$img.each(function(){
$(this).css("left", $(this).position().left-1); // 1px씩 왼쪽으로 이동
});
$first = $("#banner"+first);
$last = $("#banner"+last);
if($first.position().left < -200) { // 제일 앞에 배너 제일 뒤로 옮김
$first.css("left", $last.position().left + $last.width()+5 );
first++;
last++;
if(last > imgCnt) { last=1; }
if(first > imgCnt) { first=1; }
}
}, 50); //여기 값을 조정하면 속도를 조정할 수 있다.(위에 1px 이동하는 부분도 조정하면

//깔끔하게 변경가능하다

}

};

</script>

위의 소스도 설명 들어보면 복잡한거 아니다.


소스 시작 부분에 $(document).ready 가 아닌 window.onload로 한 이유는 두 구문의 차이 때문인데, 위 소스가 이미지를 정렬하는 부분이 있어서 DOM 로딩만 완료되면 바로 스크립트를 시작하는 $(document).ready 를 쓰지않고 외부 파일(이미지 등등)을 모두 로딩후 스크립트를 시작하는 window.onload를 사용했다.

실제로 테스트 해보니 $(document).ready로 했을 때, PC환경에서는 아무래도 성능이 좋아서 문제된 걸 못봤지만, 모바일 환경에서는 배너의 정렬이 엉망으로 되는 경우가 많았다.


변수에 대한 설명을 하면, first와 last는 배너의 제일 왼쪽 배너와 오른쪽 배너의 id 속성 값의 넘버링을 위한 변수이이고, Jquery 변수인 $first와 $last는 제일 왼쪽와 제일 오른쪽의 선택자를 저장하는 변수이다. 

bannerLeft 변수는 현재 배너의 left값을 저장한다. 배너가 정렬하면서 이 값도 같이 증가한다. 

imgCnt 변수는 배너 총 갯수가 저장될 변수이다.


1. 이미지 정렬을 한다. 5px 간격으로 가로로 정렬한다.그리고 정렬하면서 id 속성값을 넣어준다. banner1 ,banner2, ...... 이런식으로....

그리고 배너 갯수를 카운터해서 last 변수에 저장한다.


2. 배너 갯수를 확인해서 태두리 밖으로 벗어나는 갯수면 옆으로 이동시킨다. animate 함수를 이용하는 방법도 있지만 내가 그걸 쓰지 않는 이유는 써보면 알겠지만, 그게 오히려 매끄럽지 못할 때가 있다. 

여튼 1px씩 왼쪽을 이동시킨다. 소스를 보면 알겠지만 옆으로 이동시키면서 배너 옮기는 작업하기 전에 배너 제일 외쪽에 있는 넘과 제일 오른쪽에 있는 넘 id 속성 값을 변수에 저장해둔다. 


3. 제일 왼쪽 배너의 상대위치 left값이 -200보다 작으면, 제일 오른쪽에 있는 넘 뒤로 5px 간격 추가해서 위치 이동시킨다.


배너를 추가하거나 뺄경우, 그냥 img 태그를 더 넣거나 빼기만 하면 될수 있도록 소스가 구성되어 있다.

소스를 잘 응용해 보면 반대방향으로 이동시킬 수도 있고, 나름 괜찮은 소스이다.

참고하시면 도움 많이 되실듯 ^^