[J-Query] JQuery를 이용한 이미지 리스트 변경

• 
• 

• 
• 

• 
• 

prevnext

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script> function change(type){ var parent=$('span#roll'); var first=$('span#roll>ul').first(); var last=$('span#roll>ul').last(); if(type=='next'){ first.css('display','none'); parent.append(first); $('span#roll>ul').first().css('display','block'); } else if(type=='prev'){ first.css('display','none'); parent.prepend(last); $('span#roll>ul').first().css('display','block'); } } </script> <div align="center" style="height:200px;margin-left:130px"> <span id="roll"> <ul style="list-style:none;"> <li style="float:left"><img src="https://t1.daumcdn.net/cfile/tistory/22017C385166BF161F" width="300px" name="1"></li> <li style="float:left"><img src="https://t1.daumcdn.net/cfile/tistory/144694475176A0B914" width="300px" name="2"></li> </ul> <ul style="display:none;list-style:none"> <li style="float:left"><img src="https://t1.daumcdn.net/cfile/tistory/227DC63B5166BC0B2B" width="300px" name="3"></li> <li style="float:left"><img src="https://t1.daumcdn.net/cfile/tistory/0147B438516424D60D" width="300px" name="4"></li> </ul> <ul style="display:none;list-style:none"> <li style="float:left"><img src="https://t1.daumcdn.net/cfile/tistory/247590355164241439" width="300px" name="5"></li> <li style="float:left"><img src="https://t1.daumcdn.net/cfile/tistory/161F10415164235C24" width="300px" name="6"></li> </ul> </span> </div> <a href="javascript:change('prev')" style="margin-left:425px">prev</a><a href="javascript:change('next')" style="margin-left:37px">next</a>

간단한 설명

jquery가 필요하다. <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

ID값 사용시 # (ex : $('#roll') )

Class 사용시 . (ex : $('.roll') )

#('span#roll') : span태그중 ID가 roll인 것

#('span#roll>ul') : span태그중 ID가 roll인 것이 갖는 자식인 ul 태그

first() : 첫번째 태그(엘리먼트)

last() : 마지막 태그(엘리먼트)

append() : 맨 뒤에 붙여 넣는다.

prepend() : 맨 앞에 붙여 넣는다.

소스에 ul이 3개다.

ul 3개가 append와 prepend때문에 순서가 바뀐다.

맨 앞의 ul만 나타나게 함으로써 리스트를 변경 할 때마다 span태그 내 첫번째 ul이 보이도록 한다.