jquery를 이용한 슬라이드(slides)배너

jquery에서 사용할 수 있는 slidesjs 라는 좋은 툴이 있지만, 퍼블리셔가 작업해서준 HTML 구조와 CSS 변경 작업이 어려워서 직접 만들었습니다.

어떤건지는 여기서 확인!

slidesjs 보다 별로이니 되도록이면 slidesjs 를 쓰도록 하자!
그래도 나름 비슷하게 만든다고 만들었음

자바스크립트 부분

var slides_auto_time = 5000; //자동으로 다음이미지를 불러올시간
var slides_ani_time = 500; // 애니메이션 초

var slides;
var slides_pagination;
var slides_total = 0;
var slides_idx = 0;
var slides_time = null;
var slides_click_page = -1;
var slides_move_img = -1;
var slides_button_lock = 0;

$(document).ready(function () {
	slides_main();
});

function slides_main() {
	slides = $("#slides .main_img .content"); //슬라이드 컨텐츠 영역
	slides_pagination = $("#slides .btn_area p"); // 슬라이드 페이지 영역

	slides_total = slides.find("a").length;

	var btn_page_html = "";
	for(i=0;i<slides_total;i++) {
		btn_page_html += "<a href=\"javascript:slides_move_page('"+i+"');\" idx='"+i+"'><img src='./images/jquery_slides/btn_off.png' alt='"+(i+1)+"' /></a>\n";
	}

	slides_pagination.html(btn_page_html);

	slides_pagination.find("a img").eq(0).attr("src", "./images/jquery_slides/btn_on.png");

	slides_time = setTimeout("slides_prev()", slides_auto_time);
}

function slides_page_next() {
	if(slides_click_page == -1) {
		slides_idx--;

		if(slides_idx < 0) {
			slides_idx = slides_total-1;
		}
	} else {
		slides_idx = slides_click_page;
		slides_click_page = -1;
	}
	slides_pagination.find("a img").attr("src", "./images/jquery_slides/btn_off.png");
	slides_pagination.find("a img").eq(slides_idx).attr("src", "./images/jquery_slides/btn_on.png");
}

function slides_page_prev() {
	if(slides_click_page == -1) {
		slides_idx++;

		if(slides_idx >= slides_total) {
			slides_idx = 0;
		}
	} else {
		slides_idx = slides_click_page;
		slides_click_page = -1;
	}
	slides_pagination.find("a img").attr("src", "./images/jquery_slides/btn_off.png");
	slides_pagination.find("a img").eq(slides_idx).attr("src", "./images/jquery_slides/btn_on.png");
}

function slides_next() {
	if(slides_button_lock) return ;
	slides_button_lock = 1;

	if(slides_time != null) {
		clearTimeout(slides_time);
		slides_time = null;
	}

	slides.find("a").last().css({"margin-left":"-546px"});
	var tmp = slides.find("a").last();
	slides.prepend(tmp);

	slides.find("a").eq(0).animate({ marginLeft: "+=546" }, slides_ani_time, function () {
		slides.find("a").css("margin-left","0");
		slides_page_next();

		if(slides_move_img > -1) sortSlides();

		slides_button_lock = 0;

		slides_time = setTimeout("slides_prev()", slides_auto_time);
	});
}

function slides_prev() {
	if(slides_button_lock) return ;
	slides_button_lock = 1;

	if(slides_time != null) {
		clearTimeout(slides_time);
		slides_time = null;
	}

	slides.find("a").eq(0).animate({ marginLeft: "-=546" }, slides_ani_time, function () {
		var tmp = slides.find("a").first();
		slides.append(tmp);
		slides.find("a").css("margin-left","0");
		slides_page_prev();

		if(slides_move_img > -1) sortSlides();

		slides_button_lock = 0;

		slides_time = setTimeout("slides_prev()", slides_auto_time);
	});
}

function slides_move_page(idx) {
	var tmp;
	slides.find("a").each(function () {
		if(idx == $(this).attr("idx")) {
			tmp = $(this);
		}
	});

	slides_click_page = idx;
	slides_move_img = idx;

	if(slides_idx > idx && idx > -1) {
		slides.append(tmp);
		slides_next();
	} else if(slides_idx < idx && idx < slides_total) {
		slides.find("a").eq(0).after(tmp)
		slides_prev();
	} else {
		slides_click_page = -1;
		slides_move_img = -1;
	}
}

function sortSlides() {
	var tmp = new Array();

	slides_move_img = slides.find("a").eq(0).attr("idx");

	slides.find("a").each(function () {
		var idx = $(this).attr("idx");
		tmp[idx] = $(this);
	});

	var i = 0;
	while(i < slides_total) {
		slides.append(tmp[slides_move_img]);

		slides_move_img++;
		if(slides_move_img >= slides_total) {
			slides_move_img = 0;
		}

		i++;
	}

	slides_move_img = -1;
}

HTML + CSS 부분

<style>
body { margin:0; padding:0; }

.contentwrap1 {width:1200px;height:251px;background:url(./images/jquery_slides/bg_main_top.png) no-repeat;padding:16px 0 0 0;position:relative;z-index:9;}
.main_visual {width:638px;height:250px;margin:0px 0 0 135px;position:relative;}
.main_img {width:546px;height:250px;margin-left:45px;}
.main_img ul {width:546px;height:250px;overflow:hidden;float:left;}
.main_img ul li {float:left;}

p.btn_pre {position:absolute;top:100px;left:0;}
p.btn_next {position:absolute;top:100px;right:0;}
.btn_area {position:absolute;bottom:0px;width:1200px;height:39px;background:url(./images/jquery_slides/bg_btnArea01.png) repeat-x;z-index:2;}
.btn_area p {width:546px;margin-left:180px;text-align:center;}
.btn_area p span {margin-right:2px;}

#slides .main_img a { float:left; }
#slides .main_img { overflow:hidden; }
#slides .main_img .content { width:1092px; }
#slides .main_img .content img { width:546px; height:250px; }
</style>

<div class="contentwrap1" id="slides">
	<div class="main_visual">
		<p class="btn_pre"><a href="javascript:slides_prev();"><img src="./images/jquery_slides/btn_pre.png" alt=""/></a></p>
		<div class="main_img">
			<div class="content">
				<a href="http://www.naver.com" idx="0"><img src="./images/jquery_slides/banner_13754311080.png" alt="배너1" title="배너1" /></a>
				<a href="http://www.daum.net" idx="1"><img src="./images/jquery_slides/banner_13754328710.png" alt="배너2" title="배너2" /></a>
				<a href="http://www.naver.com" idx="2"><img src="./images/jquery_slides/banner_13758631920.png" alt="배너3" title="배너3" /></a>
				<a href="http://jon.rcsoft.co.kr/html/index_new.html" idx="3"><img src="./images/jquery_slides/banner_13759283560.png" alt="배너4" title="배너4" /></a>
				<a href="http://www.google.co.kr" idx="4"><img src="./images/jquery_slides/banner_13759284440.jpg" alt="배너5" title="배너5" /></a>
			</div>
		</div>
		<p class="btn_next"><a href="javascript:slides_next();"><img src="./images/jquery_slides/btn_next.png" alt=""/></a></p>
	</div>
	<div class="btn_area">
		<p>
		</p>
	</div>
</div>

 

 

CC BY-NC-SA 4.0 This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

  • Daehyun Kim

    좋은데요. 잘 참조하겠습니다.