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

munilive
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>
    

Comments

comments powered by Disqus