메인화면 제이쿼리를 이용한 이미지 슬라이드 적용과 관련한 질의
본문
다름이 아니라 그누보드4로 작업한 홈페이지의
메인화면에 가로930*세로120 정도의 이미지2개를 이용해서
http://bxslider.com/examples/auto-show-start-stop-controls
위 링크처럼 슬라이드형태로 이미지를 두개겹쳐서 보여주고 싶습니다.
근데, 제이쿼리에 대한 지식이 짧아서 ... ㅠㅠ
보이는 코드를 페이지에 붙여넣어도 안되고
몇몇분의 비슷한 팁을 적용해봐도 이상하게 이미지가 모두 노출이 되고 정상적인 작동을 하지않습니다.
위링크에서 가져온 jquery 관련 파일을 이용해서 메인화면에 아래와 같이 짜집기해서 적용해봣습니다.
<script src="홈페이지주소/jquery.bxslider/jquery.bxslider.min.js"></script>
<link href="홈페이지주소/jquery.bxslider/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: true
});
});
</script>
<div style="width:930px">
<ul class="bxslide">
<li><img src="이미지경로/test01.jpg"></li>
<li><img src="이미지경로/test02.jpg"></li>
</ul>
........... 실행이 되지를 않습니다.
그냥 메인 html 페이지에 넣어서 이미지만 보여주려고 하는건데 왜 안되는지 모르겠네요
코드를 좀 확인해주시고 뭐가 문제인지 봐주시고
도움좀 부탁드려요~
답변 2
에고~~~ 되었습니다.
짜집기 하다가 보니, 원래코드에 오타가 좀 있엇네요.
두 분의 글이 많은 도움이 되었습니다. 감사합니다 ^^
<!-- 인트로 메인화면 이미지 슬라이딩 -->
<script src="http://홈페이지주소/js/jquery-1.8.3.min.js"></script>
<script src="http://홈페이지주소/main/jquery.bxslider/jquery.bxslider.min.js"></script>
<link href="http://홈페이지주소/main/jquery.bxslider/jquery.bxslider.css" rel="stylesheet" />
<!-- <div style="width:930px"> --->
<div style="position:relative; margin:0; padding:0; width:930px; height:240px; border:1px solid #333333; background:#ffffff url(/main/imgs/main_img01.jpg) no-repeat;">
<ul class="slider">
<li><img src="http://홈페이지주소/main/imgs/main_img01.jpg"></li>
<li><img src="http://홈페이지주소/main/imgs/main_img02.jpg"></li>
<li><img src="http://홈페이지주소/main/imgs/main_img03.jpg"></li>
<li><img src="http://홈페이지주소/main/imgs/main_img04.jpg"></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slider').bxSlider({
mode:'fade', // 사라지는 모양
autoslide:3000, // ???
// speed:1000, // 이미지변환 속도 기본 500
pager:false, // 하단 이미지 보기 버튼
auto:true, // 자동시작
autoControls:false, // 하단 이미지 보기 선택버튼
captions:true, // 캡션
controls:false // 좌,우 컨트롤 버튼 숨기기/보이기
});
});
</script>
<!-- 인트로 END -->
