코딩룸*◡*

슬라이드 배너 본문

공부좀 하자/jQuery

슬라이드 배너

코딩하는 묭이💛 2017. 7. 26. 17:30

슬라이드 배너는 구글에서 검색해보면 플러그인으로서 셀 수없이 많이 접할 수 있다. 

그러나 정작 직접 만들 수 있는 사람이 몇이나 될지 궁금해졌다. 

그래서 내가 한번 직접 만들어보고자 주제로 정했다.




1. 생각해보기

1) 이전, 다음 버튼을 클릭했을 때 이미지가 변경되는 기능 짜보기


이미지를 포함하고 있는 ul 요소에 animate() 메서드를 적용하는 방법으로 만들어보자.


<script>

$(function(){

$(".left").click(function(){

$("#banner ul").animate({left:5}, 3000);

      });

$(".right").click(function(){

$("#banner ul").animate({right:5}, 3000);

});

});;

</script>


<body> 

<div id="banner">

<ul>

<li><img src="images/book1.jpg" alt="책 표지1" /></li>

<li><img src="images/book2.jpg" alt="책 표지2" /></li>

<li><img src="images/book3.jpg" alt="책 표지3" /></li>

</ul>

</div>

<div id="b_control">

<a href="#play" class="play"><img src="images/play.gif" alt="재생" /></a>

<a href="#play" class="stop"><img src="images/stop.gif" alt="멈춤" /></a>

</div>

</body>



수정중...


반응형

'공부좀 하자 > jQuery' 카테고리의 다른 글

[jquery]offset  (0) 2017.11.27
마우스휠 바  (0) 2017.09.18
마우스 휠 한번에 한 영역씩 이동하기  (0) 2017.09.14
[jQuery]화면 크기에 따라 이미지 변경  (0) 2017.08.23
.on('click') 과 .click()의 차이점  (0) 2017.07.10
'공부좀 하자/jQuery' Related Articles more
Comments