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개
게시글 목록
| 번호 | 제목 |
|---|---|
| 23606 | |
| 23598 | |
| 23585 | |
| 23579 | |
| 23578 | |
| 23564 | |
| 23550 | |
| 23549 | |
| 23548 | |
| 23529 | |
| 23510 | |
| 23507 | |
| 23481 | |
| 23471 | |
| 23453 | |
| 23452 | |
| 23450 | |
| 23436 | |
| 23428 | |
| 23404 | |
| 23396 | |
| 23389 | |
| 23380 | |
| 23369 | |
| 23350 | |
| 23337 | |
| 23317 | |
| 23307 | |
| 23298 | |
| 23290 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기