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>
<!--메인배너-->
이렇게하시면 좌로 움직이는 방식에서 페이드아웃방식으로 변경됩니다.
/*메인배너*/
#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개
wootea
7년 전
페이드 방식이면 어떤 느낌일지 궁금해서 찾아보고 있었는데 감사합니다.
올려주신 내용으로 교체해서 페이드아웃은 성공했는데
슬라이드 배너 위에 텍스트나 다른 이미지요소 삽입이 전혀 불가능하네요.
기존 테마랑 디자인이 바뀌게되는데 ㅜ
기존 테마에ㅐ서 페이드아웃만 되게끔 사용하려면 어떤 부분을 수정해야할까요.
올려주신 내용으로 교체해서 페이드아웃은 성공했는데
슬라이드 배너 위에 텍스트나 다른 이미지요소 삽입이 전혀 불가능하네요.
기존 테마랑 디자인이 바뀌게되는데 ㅜ
기존 테마에ㅐ서 페이드아웃만 되게끔 사용하려면 어떤 부분을 수정해야할까요.
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4402 | ||
| 2514 | 1년 전 | 901 | ||
| 2513 |
베리소프트
|
1년 전 | 619 | |
| 2512 |
|
1년 전 | 949 | |
| 2511 |
|
1년 전 | 1078 | |
| 2510 | 1년 전 | 1006 | ||
| 2509 | 1년 전 | 1057 | ||
| 2508 | 1년 전 | 1307 | ||
| 2507 | 1년 전 | 686 | ||
| 2506 | 1년 전 | 1253 | ||
| 2505 |
|
1년 전 | 1207 | |
| 2504 | 1년 전 | 1407 | ||
| 2503 | 1년 전 | 944 | ||
| 2502 | 1년 전 | 1070 | ||
| 2501 | 1년 전 | 1169 | ||
| 2500 |
welcome
|
1년 전 | 1077 | |
| 2499 |
하늘그루터기
|
1년 전 | 870 | |
| 2498 | 1년 전 | 1177 | ||
| 2497 | 1년 전 | 643 | ||
| 2496 | 1년 전 | 962 | ||
| 2495 |
|
1년 전 | 1417 | |
| 2494 | 1년 전 | 944 | ||
| 2493 | 1년 전 | 944 | ||
| 2492 | 1년 전 | 1154 | ||
| 2491 | 1년 전 | 1120 | ||
| 2490 | 1년 전 | 1089 | ||
| 2489 | 1년 전 | 1019 | ||
| 2488 | 1년 전 | 771 | ||
| 2487 |
|
1년 전 | 1209 | |
| 2486 | 1년 전 | 830 | ||
| 2485 | 1년 전 | 1006 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기