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년 전 | 4425 | ||
| 654 | 8년 전 | 5461 | ||
| 653 | 8년 전 | 27678 | ||
| 652 | 8년 전 | 7462 | ||
| 651 | 8년 전 | 5779 | ||
| 650 | 9년 전 | 7785 | ||
| 649 | 9년 전 | 7267 | ||
| 648 | 9년 전 | 4347 | ||
| 647 | 9년 전 | 5618 | ||
| 646 | 9년 전 | 6829 | ||
| 645 | 9년 전 | 6542 | ||
| 644 |
|
9년 전 | 6077 | |
| 643 | 9년 전 | 5356 | ||
| 642 | 9년 전 | 5358 | ||
| 641 | 9년 전 | 7999 | ||
| 640 | 9년 전 | 6040 | ||
| 639 | 9년 전 | 4380 | ||
| 638 | 9년 전 | 8225 | ||
| 637 | 9년 전 | 8198 | ||
| 636 | 9년 전 | 6040 | ||
| 635 | 9년 전 | 15958 | ||
| 634 |
KeepItSimpleStyle
|
9년 전 | 5330 | |
| 633 | 9년 전 | 12143 | ||
| 632 | 9년 전 | 9127 | ||
| 631 |
minders
|
9년 전 | 10396 | |
| 630 | 9년 전 | 6695 | ||
| 629 | 9년 전 | 4577 | ||
| 628 | 9년 전 | 5085 | ||
| 627 | 9년 전 | 5399 | ||
| 626 | 9년 전 | 7891 | ||
| 625 | 9년 전 | 17705 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기