본문 바로가기
프로그래밍/jQuery

jQuery 를 이용한 슬라이드 이미지

by zoo10 2011. 1. 22.

이번 포스팅은 이전에 제가 제작한 jQuery 를 사용하지 않은 자바스크립트 이미지 슬라이더에 버그가 있어서 jQuery 를 사용한 슬라이드를 긴급 제작하여 쓰는 글입니다. 역시 안정적인 라이브러리를 사용하는게 아주 중요합니다. ^^;;

음 그런데 한가지 제약이 있습니다. 이 스크립트를 사용하기 위해서는 HTML 과 StyleSheet 를 어느정도 수준으로 구사하실 수가 있어야 합니다. 그 부분까지 모두 다 설명드릴 수는 없는 점 양해 부탁드립니다. 일단 데모부터 확인해 주세요.

미리보기

jQuery.banner.js 파일이 필요합니다. 이 파일도 다운받아 적절한 위치에 가져다 놓으셔야 합니다. 소스는 하단에 첨부하겠습니다. 일단 사용법을 말씀드리면.

$(function() {
	$("#image_list_1").jQBanner({	//롤링을 할 영역의 ID 값
		nWidth:600,					//영역의 width
		nHeight:150,				//영역의 height
		nCount:5,					//돌아갈 이미지 개수
		isActType:"up",				//움직일 방향 (left, right, up, down)
		nOrderNo:1,					//초기 이미지
		nDelay:2000					//롤링 시간 타임 (1000 = 1초)
		/*isBtnType:"li"*/			//라벨(버튼 타입) - 여기는 안쓰임
		}
	);
});

이런 형태로 사용하시면 됩니다. 검증되지 않은 소스를 내놔서 죄송할 따름입니다. ㅡㅡ;

부디 너그러이 용서를 ^^;;

jquery.banner.js

jquery_image_slider.html

※ 이 소스는 1300k.com 의 소스를 참고하였습니다.