728x90
300x250
SMALL
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <head> <style> div.img-way { position: relative; } div.image-way img { position: absolute; left: 0; top: 0; width: 120px; } #btnA{ padding:5px; margin-bottom:5px; } </style> <script> $(document).ready(function() { // 버튼 클릭 이벤트 실행. $("#btnA").click(function() { // 이미지 찾기. var $images = $("img"); // 이미지 개수 구하기. var length = $images.length; // 여기에 풀이를 입력해주세요. // 이미지 배열하기. for (var i = 0; i < length; i++) { // n번째 이미지 구하기 var $img = $images.eq(i); // 위치 값 구하기 var x = 100 + (i * 150); // 위치 설정 $images.eq(i).css({ left:x, top:100 }); } }); }); </script> </head> <body> <div> <button id="btnA"> 배열변경 </button> </div> <div class="image-way"> <img src="banners/1.png" > <img src="banners/2.png" > <img src="banners/3.png" > <img src="banners/4.png" > <img src="banners/5.png" > </div> </BODY> |
배열변경 버튼을 클릭하면 이미지를 찾고ㅗ
이미지의 개수를 구한 다음에
그 개수만큼 반복문 실행
var $img = $images.eq(i);
이미지 리스트에스 N번째 이미지를 가져온다
이미지의 위치 설정을 하고 변수 X
X는 LEFT값이 된다.
728x90
반응형
LIST
'javaScript > JS Examples' 카테고리의 다른 글
| 랜덤숫자만들기, 지정된 숫자가 나오면 빠져나오기 (0) | 2019.03.19 |
|---|---|
| 클릭하면 바둑판식으로 이미지 배열하기 (0) | 2019.03.17 |
| for문으로 구구단 출력/ 배열총합 구하기 :: 반복문 예시 (0) | 2019.03.07 |
| 1에서 10사이의 랜덤 수 생성하기 (0) | 2019.02.27 |
| 체크박스 만들기 (0) | 2019.02.25 |
댓글