슬라이드 배너 가운데 정렬, 마우스오버 오류
관련링크
http://jesuslove.dothome.co.kr/
194회 연결
본문
아래 제 사이트 인데 링크타고 오셔서 한번 봐주시길 부탁드립니다ㅜ
몇시간동안 이것 저것 해보고 찾아봐도 도대체 뭐가 잘 못 인지 모르겠네요...
슬라이드 배너 이미지가 문제인지 li태그가 문제인지 자꾸 왼쪽 여백이 생깁니다.
게다가 배너 화살표에 마우스 오버시 다른 이미지가 보이도록 했는데, 오버시 이미지가 없어지구요,
오른쪽 화살표는 아예 나오지도 않네요...
드림위버에서 생코딩으로 했을 때는 문제가 없는데, 그누보드5에 앉히니까 문제가 발생합니다ㅜ
꼭 좀 답변 부탁드리겠습니다!
*HTML
<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>
*CSS
#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');}
*스크립트
<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');
});
};
});
</script>
!-->!-->!-->
답변 1
여백 문제는 css 에서 한 줄 추가해보세요.
#slideBanner ul, ol{padding:0}
이미지 안 나오는 건 이미지 경로에서 ..img 앞 부분에 / 가 빠졌네요.
이렇게 해야 합니다.
../img/
이것도 그누보드에 있는 것과 중복이라서 삭제하셔야겠네요.
<script src="js/jquery-1.8.3.min.js"></script>
답변을 작성하시기 전에 로그인 해주세요.