company테마 메인 슬라이드 페이드아웃방식 변경 > 그누보드5 팁자료실

그누보드5 팁자료실

company테마 메인 슬라이드 페이드아웃방식 변경 정보

company테마 메인 슬라이드 페이드아웃방식 변경

본문

default.css 메인베나부분 수정
/*메인배너*/
#main_bn {border-top:2px solid #84C8ED;background:#E3DEDB;position:relative;overflow: auto;top:135px;margin:0 auto;width:100% !important}
#main_bn .slideshow li{height:450px;float: left;}
#main_bn li .bn_wr{width:1100px; margin:0 auto;padding-top:100px}
#main_bn li .bn_txt{background-color:rgba(39, 120, 197,0.8);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#902778c5,endColorstr=#902778c5);width:283px; height:205px;padding:25px}
#main_bn li .bn_txt h2{text-shadow: 0 1px 1px rgba(0, 0, 0, .3);color:#fff;font-size:2.37em;line-height:40px;margin-top:35px}
#main_bn li .bn_txt p{color:#fff;background:url(../img/bn_pbg.jpg) no-repeat top left;padding-top:20px;margin-top:20px ;font-size:1.34em;line-height:23px;}
#main_bn .bn_btn{position:absolute;top:120px;left:50% ;z-index:0;width:1100px;margin-left:-520px}
#main_bn .bn_btn .prev{background:url(../img/bn_btn.gif) no-repeat;border:none;width:24px;height:24px;text-indent:-9999999px;overflow:hidden;display:inline-block}
#main_bn .bn_btn .next{background:url(../img/bn_btn.gif) no-repeat -27px 0;border:none;width:24px;height:24px;text-indent:-99999999px;overflow:hidden;display:inline-block}
#main_bn .dots{position:absolute;bottom:70px;text-align:center;width:100%}
#main_bn .dots li{border:none;text-indent:-9999px;width:48px;height:4px;background:#3C95D5;overflow:hidden;display:inline-block;margin:0 ; zoom:1; *display:inline /*IE7 HACK*/; _display:inline; /*IE6 HACK*/}
#main_bn .dots li.active{background:#000}


index.php 수정
 

<script type="text/javascript" src=" http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="./js/jquery.FadeWideBgImg.js"></script>
<script type="text/javascript">
(function($){
jQuery(document).ready(function(){
$('.slideshow').FadeWideBgImg({interval:5000});
});
}(window.jQuery,window));
</script>
 
<!--메인배너-->
    <div id="main_bn">
        <ul class="slideshow">

    <li><img src="<?php echo G5_URL ?>/theme/company/img/main_bn2.jpg"></li>
<li><img src="<?php echo G5_URL ?>/theme/company/img/main_bn3.jpg"></li>
<li><img src="<?php echo G5_URL ?>/theme/company/img/main_bn4.jpg"></li>
<li><img src="<?php echo G5_URL ?>/theme/company/img/main_bn5.jpg"></li>
<li><img src="<?php echo G5_URL ?>/theme/company/img/main_bn6.jpg"></li>
<li><img src="<?php echo G5_URL ?>/theme/company/img/main_bn7.jpg"></li>
        </ul>
    </div>
    <!--메인배너-->

이렇게하시면 좌로 움직이는 방식에서 페이드아웃방식으로 변경됩니다.
추천
1

댓글 1개

페이드 방식이면 어떤 느낌일지 궁금해서 찾아보고 있었는데 감사합니다.
올려주신 내용으로 교체해서 페이드아웃은 성공했는데
슬라이드 배너 위에 텍스트나 다른 이미지요소 삽입이 전혀 불가능하네요.
기존 테마랑 디자인이 바뀌게되는데 ㅜ
기존 테마에ㅐ서 페이드아웃만 되게끔 사용하려면 어떤 부분을 수정해야할까요.
전체 2,432 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT