테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

슬라이드 배너 가운데 정렬, 마우스오버 오류 채택완료

초얌 9년 전 조회 6,739
답변 1
목록

아래 제 사이트 인데 링크타고 오셔서 한번 봐주시길 부탁드립니다ㅜ

 

몇시간동안 이것 저것 해보고 찾아봐도 도대체 뭐가 잘 못 인지 모르겠네요...

슬라이드 배너 이미지가 문제인지 li태그가 문제인지 자꾸 왼쪽 여백이 생깁니다.

게다가 배너 화살표에 마우스 오버시 다른 이미지가 보이도록 했는데, 오버시 이미지가 없어지구요,

오른쪽 화살표는 아예 나오지도 않네요...

드림위버에서 생코딩으로 했을 때는 문제가 없는데, 그누보드5에 앉히니까 문제가 발생합니다ㅜ

 

꼭 좀 답변 부탁드리겠습니다!

 

 

*HTML

</p><p><div id="slideBanner">
    <ul class="imgGroup">
        <li><img src="<?php echo G5_URL; ?>/img/banner/banner01.jpg" /></li>
        <li><img src="<?php echo G5_URL; ?>/img/banner/banner02.jpg" /></li>
        <li><img src="<?php echo G5_URL; ?>/img/banner/banner03.jpg" /></li>
        <li><img src="<?php echo G5_URL; ?>/img/banner/banner04.jpg" /></li>
    </ul>
    <ol class="bannerArrow">
        <li id="btnL"><!--<img src="img/arrow_L.png" />--></li>
        <li id="btnR"><!--<img src="img/arrow_R.png" />--></li>
    </ol>
</div></p><p>

 

*CSS

</p><p>#slideBanner{width:960px; height:300px; margin:0 auto; overflow:hidden; position:relative; margin-bottom:10px;}
#slideBanner>.imgGroup{width:3840px}
#slideBanner>.imgGroup>li{float:left;}
#slideBanner>.imgGroup>li>img{width:960px; height:300px;}
#slideBanner>.bannerArrow{width:960px; height:60px; position:absolute; top:120px;}
#slideBanner>.bannerArrow>li{width:36px; height:60px; cursor:pointer; box-sizing:border-box;}
#slideBanner>.bannerArrow>#btnL{float:left; margin-left:10px; background:url('../img/banner/arrowOff_L.png');}
#slideBanner>.bannerArrow>#btnR{float:right; margin-right:10px; background:url('..img/banner/arrowOff_R.png');}
#slideBanner>.bannerArrow>#btnL:hover{background:url('..img/banner/arrowOn_L.png');}
#slideBanner>.bannerArrow>#btnR:hover{background:url('..img/banner/arrowOn_R.png');} </p><p>

 

*스크립트

</p><p><script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
 $('#slideBanner>.imgGroup').css('margin-left','-960px');
 $('#slideBanner>.imgGroup>li').last().prependTo('.imgGroup');
 
 //일정시간마다 코드를 실행
 var interval = setInterval(nextImg, 5000);
 
 //$('.slideBanner').mouseenter(function(){});
 //$('.slideBanner').mouseleave(function(){});
 $('.slideBanner').hover(stopPlay,autoPlay);
 function autoPlay(){
  interval = setInterval(nextImg, 5000);
 }
 function stopPlay(){
  //interval을 제거하기 위해 인터발 id를 사용합니다.
  //변수 형태의 인터발함수를 사용
  clearInterval(interval); 
 }
 //btnR 클릭하면 기능이 실행
 //기능 - 다음 그림이 보이는 기능
 $('.bannerArrow>#btnR').click(nextImg);
 $('.bannerArrow>#btnL').click(function(){
  var n = $('#slideBanner>.imgGroup').css('margin-left');
  n=parseInt(n);
  $('#slideBanner>.imgGroup').stop().animate({marginLeft:960+n},1000,function(){
   $('#slideBanner>.imgGroup>li').last().prependTo('.imgGroup');
   $('#slideBanner>.imgGroup').css('margin-left','-960px')
  });
  
 });
 
 function nextImg(){
  var n = $('#slideBanner>.imgGroup').css('margin-left');
  n=parseInt(n);
  $('#slideBanner>.imgGroup').stop().animate({marginLeft:-960+n},1000,function(){
   $('#slideBanner>.imgGroup>li').first().appendTo('.imgGroup');
   $('#slideBanner>.imgGroup').css('margin-left','-960px');
  });</p><p> };
});
</script></p><p>

 

#그누보드5 #javascript #슬라이드배너 #가운데정렬 #jquery
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
작
작은별
9년 전

여백 문제는 css 에서 한 줄 추가해보세요.

#slideBanner ul, ol{padding:0}

 

이미지 안 나오는 건 이미지 경로에서 ..img 앞 부분에 / 가 빠졌네요.

이렇게 해야 합니다.

../img/

 

이것도 그누보드에 있는 것과 중복이라서 삭제하셔야겠네요.

<script src="js/jquery-1.8.3.min.js"></script> 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
초얌
9년 전
답변 정말 감사합니다!!
한가지 더 봐주실 수 있을 까요?ㅜ

게시판에서 글쓰기를 하면 height 길이가 잘려서 아래 푸터 부분에 숨겨지는데, 어떻게 해야할까요?ㅜ

~~~~~~~~~HTML~~~~~~~~~~
<!-- 콘텐츠 시작 { -->
<div id="wrapper">
<div id="aside">
<?php echo outlogin('theme/basic'); // 외부 로그인, 테마의 스킨을 사용하려면 스킨을 theme/basic 과 같이 지정 ?>
<?php echo poll('theme/basic'); // 설문조사, 테마의 스킨을 사용하려면 스킨을 theme/basic 과 같이 지정 ?>
</div>
<div id="container">
<?php if ((!$bo_table || $w == 's' ) && !defined("_INDEX_")) { ?><div id="container_title"><?php echo $g5['title'] ?></div><?php } ?>

<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

if (G5_IS_MOBILE) {
include_once(G5_THEME_MOBILE_PATH.'/tail.php');
return;
}
?>

</div>
</div>
</div>

<!-- } 콘텐츠 끝 -->


~~~~~~~CSS~~~~~~~~~~~
/* 중간 레이아웃 */
.lt a{color:#FFF;}

#wrapper {z-index:1000; margin:0 auto; width:960px; zoom:1; overflow:hidden; background:rgba(0,0,0,0.8);}
#wrapper:after {display:block;visibility:hidden;clear:both;content:""}

#aside {float:right;margin:0 0 0 -1px;width:210px;background:#fff; color:#000; box-sizing:border-box;}

#container {z-index:4; float:left;padding:15px 15px 15px 15px;width:750px;min-height:500px;height:auto !important; background:;font-size:1em;zoom:1; color:#FFF; box-sizing:border-box;}
#container:after {display:block;visibility:hidden;clear:both;content:""}
#container_title {margin-bottom:20px;font-size:1.2em;font-weight:bold}

.lt{width:340px !important; cursor:pointer;}
.lt:hover{background:rgba(153,153,153,0.8);}

/* 하단 레이아웃 */
#ft {min-width:960px;border-top:1px solid #dde4e9;background:#f2f5f9}
#ft h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ft p {margin:0;padding:10px 0;line-height:1.8em}

#ft_catch {position:relative;margin:0 auto;padding:20px 0 0;width:960px;text-align:center}

#ft_company {text-align:center}

#ft_copy {background:#414141}
#ft_copy div {position:relative;margin:0 auto;padding:10px 0;width:960px;color:#fff}
#ft_copy a {display:inline-block;margin:0 10px 0 0;color:inherit}
#ft_copy #ft_totop {position:absolute;top:10px;right:0}

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인