공부하는 블로그

심플갤러리를 함수로 만들기 본문

Develop/JavaScript

심플갤러리를 함수로 만들기

모아&모지리 2018. 3. 18. 23:28

-풀이 전 갤러리-

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> </title>
 
<style>
    div.image-container{
        position: relative;
    }
    
    div.image-container img{
        position: absolute;
        left:0;
        top:0;
        width:120px;
    }
</style>
 
 
 
    <script type="text/javascript"  src="../../../libs/jquery-1.11.0.min.js"> </script>
    <script>
 
        /*
         미션 04: 심플 갤러리를 함수로 만들기 1
         이번 미션은 1부 06장 for문 편에서 만든 심플 갤러리를 실행 예처럼 동작하게 simpleGallery() 함수 버
         전으로 만드는 것입니다. 기존 코드를 활용해 지금부터 simpleGallery()를 완성해 주세요.
         실행 예 1
         simpleGallery(5,150,150);
         실행 예 2
         simpleGallery(3,200,200);
         */
        // 이미지 목록을 담을 변수
        var $images = null;
        $(document).ready(function(){
 
            // 이미지  찾기
            $images = $("#container1 img");
            // 이미지 배열 하기
            showGallery(5,150,150);
 
        });
 
 
        //이미지 배열하기
        function showGallery(count,width,height){
            // 이미지 개수 구하기.
            var length = $images.length;
 
            // 이미지 배열하기.
            for(var i=0;i<length;i++){
                // n번째 이미지 구하기
                var $img = $images.eq(i);
 
                // 위치 값 구하기
                var x = 100+((i%count)*width);
                var y = 100+(parseInt(i/count)*height);
 
                // 위치 설정
                $img.css({
                    left:x,
                    top:y
                });
            }
        }
 
        
    </script>
</head>
    
<body>
    <div class="image-container" id="container1">
        <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" >
        <img src="banners/6.png" >
        <img src="banners/7.png" >
        <img src="banners/8.png" >   
    </div>
</body>
</html>
cs


풀이 후 완성

저작자표시

'Develop > JavaScript' 카테고리의 다른 글

변수와 함수와의 관계  (0) 2018.04.04
매개변수가 있는 함수 만들기  (0) 2018.04.04
(javascript)리턴값 있는 함수 만들기  (0) 2018.03.18
함수 활용의 장점과 지역변수와 전역변수의 생명주기  (0) 2018.03.18
(JavaScript) while문  (0) 2018.03.18
'Develop/JavaScript' Related Articles more