jquery를 이용한 슬라이드(slides)배너
Written by munilive on (Updated: )jquery에서 사용할 수 있는 slidesjs라는 좋은 툴이 있지만, 퍼블리셔가 작업해서준 HTML 구조와 CSS 변경 작업이 어려워서 직접 만들었습니다.
slidesjs 보다 별로이니 되도록이면 slidesjs 를 쓰도록 하자!
그래도 나름 비슷하게 만든다고 만들었음, 아래 미리 보기로 구현된 모습을 확인 할 수 있습니다.
Javascript Example: jquery를 이용한 슬라이드배너
자바스크립트 부분
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>