company테마 메인 슬라이드 페이드아웃방식 변경 정보
company테마 메인 슬라이드 페이드아웃방식 변경관련링크
http://cbkmc.net/
514회 연결
본문
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
1
댓글 1개
페이드 방식이면 어떤 느낌일지 궁금해서 찾아보고 있었는데 감사합니다.
올려주신 내용으로 교체해서 페이드아웃은 성공했는데
슬라이드 배너 위에 텍스트나 다른 이미지요소 삽입이 전혀 불가능하네요.
기존 테마랑 디자인이 바뀌게되는데 ㅜ
기존 테마에ㅐ서 페이드아웃만 되게끔 사용하려면 어떤 부분을 수정해야할까요.
올려주신 내용으로 교체해서 페이드아웃은 성공했는데
슬라이드 배너 위에 텍스트나 다른 이미지요소 삽입이 전혀 불가능하네요.
기존 테마랑 디자인이 바뀌게되는데 ㅜ
기존 테마에ㅐ서 페이드아웃만 되게끔 사용하려면 어떤 부분을 수정해야할까요.