[ jquery 슬라이더 ] 이미지 슬라이더 / 탭 슬라이더 / setInterval 




단순하게 인터벌 함수를 이용해서 만든 슬라이더 함수이다.


아직 추가할 기능이 몇 가지 남아있지만 기본적인 작동 원리를 이해하기에는

괜찮은 예제인 것 같다.


 - 탭 위에 마우스를 가져다가 되면 슬라이딩 정지

 - 배너위에 마우스를 올리면 슬라이딩 정지


위 두가지 기능은 다음 포스팅에서 다루기로 하고..


아래 예제는 display:none 을 사용하지 않고  visibility:hidden 과 position:absolute 속성을 이용해서

만들어 졌다.





예제 1)


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
<!DOCTYPE html>
<head>
<style>
ul,li{list-style:none;}
#TopSlider{width:500px; height:300px; border:1px solid #d2d2d2;}
#TopSlider div{width:498px;height:298px; float:left; visibility:hidden; position:absolute;}
#top_0{background-color:red;}
#top_1{background-color:blue;}
#top_2{background-color:gray;}
#top_3{background-color:yellow;}
#ul_btns{float:left; width:420px; border:1px solid #e0e0e0;}
#ul_btns a{float:left; width:100px; border:1px solid #e0e0e0;}
#ul_btns .on{background-color:red;}
 
</style>
<script    src="https://code.jquery.com/jquery-3.0.0.min.js" 
        integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="   
        crossorigin="anonymous"></script>
<script>
 
    var intv;
    var current = 0;
    var sIdx = 0;
    var sCnt =  4;
    
 
    function startTopSlider() {
        intv = setInterval(function () {
            $("#ul_btns").find("a").eq(current++ % sCnt).click();
        }, 3000);
    }
 
    function setBnr(idx, bnr, allTab, addCls) {
        $(bnr).css("visibility""hidden")
              .eq(idx).css("visibility""visible");
        $(allTab).removeClass(addCls);
        $(allTab).eq(idx).addClass(addCls);
    }
 
    $(document).ready(function () {
        
        //set init
        $("#top_0").css("visibility""visible");
        $("#btn_0").addClass("on");
        startTopSlider();
        
        
        $("#ul_btns").find("a").click(function(){
            var idx = $(this).attr("id").split("_")[1];
            setBnr(idx, "#TopSlider > div" , "#ul_btns > a" , "on" );
            
        });
 
        
    });
</script>
 
</head>
<body>
    <p>setInterval 을 이용한 슬라이더 예제</p>
    <div id="TopSlider">
        <div id="top_0">배너 0</div>
        <div id="top_1">배너 1</div>
        <div id="top_2">배너 2</div>
        <div id="top_3">배너 3</div>
    </div>
    <div id="TopSliderBtn">
        <ul id="ul_btns">
            <a href="#" id="btn_0"><li>tab0</li></a>
            <a href="#" id="btn_1"><li>tab1</li></a>
            <a href="#" id="btn_2"><li>tab2</li></a>
            <a href="#" id="btn_3"><li>tab3</li></a>
        </ul>
    </div>
</body>
</html>
 
 
cs




디자인이 아주 부끄럽지만.. 디자인을 보려고 만든 예제는 아니니까 이해하고 넘어가도록 하자.


tab0 -> tab1 -> tab2 -> tab3 으로 이동하면서 배너 0 ~~> 배너 3 까지 노출 되는 방식이다.




예제 1 - 결과화면 )






간단하게 예제를 만드려고 노력했는데, 만들고 나니 다소 복잡한 것 같기도 하다.



예제파일 : 

test.html


display:none 과 visibility:hidden 의 차이는 아래 포스팅을 참고하도록 하자!



http://gyunbox.tistory.com/entry/visibility



"끝"






프로젝트를 진행하다가, display:none 속성과 visibility:hidden 속성에 대해서 

의문점이 생기기 시작했다.



내가 발견한 차이점은 아래와 같다.



display:none -> 데이터를 읽어오지 않음, block으로 변경시 읽어옴


visibility:hidden -> 데이터를 다 읽어옴, visible로 변경시 별도의 로딩 없이 노출 됨



그렇다면


" 어떤 경우에 어떤것을 활용하는것이 좋을까? "


아래의 경우는 display:none; 과 display:block 을 이용해서 버튼클릭시 원하는 div만 노출되게 한다.

기본적으로 #slider_showBox 의 자식 div 들을 모두 none; 처리 한 후에 원하는 것만 block 하는 원리로 작동한다.


주로 이런방식을 통해서 많이 작업을 해왔다.


예제 1) 

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
<html>
<head></head>
<script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>
<body>
    <div id="slider_showBox">
        <div id="div_1" class="btn" style="background-color:red;">1번</div>
        <div id="div_2" class="btn" style="background-color:yellow;">2번</div>
        <div id="div_3" class="btn" style="background-color:green;">3번</div>
        <div id="div_4" class="btn" style="background-color:gray;">4번</div>
    </div>
    <div id="slider_btn">
        <ul>
            <li>버튼1</li>
            <li>버튼2</li>
            <li>버튼3</li>
            <li>버튼4</li>
        </ul>
    </div>
<script>
$(document).ready(function(){
 
    $("#slider_btn li").click(function(){
        var idx = $(this).index();

        $(".btn").css("display","none")
                 .eq(idx).css("display","block");
    });
});
</script>    
</body>
<style>
#slider_showBox div{width:100%; float:left; border:1px solid red; position:relative; display:none; height:100px;}
#slider_btn{float:left; width:100%;}
#slider_btn li { float:left; width:100px; height:30px; border:1px solid red; margin:5px;}
</style>
</html>
cs




"그렇다면 visibility:hidden 는 언제? "



일단 아래의 경우를 보자.


위의 예제와는 다르게 # slider_showBox안에 a tag를 사용하고 그 안에 div를 넣고 백그라운드 이미지를 넣어주었다.



예제 2) 

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
<html>
<head></head>
<script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>
<body>
    <div id="slider_showBox">
        <a id="div_1" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_1.jpg');">1번</div></a>
        <a id="div_2" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_2.jpg');">2번</div></a>
        <a id="div_3" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_3.jpg');">3번</div></a>
        <a id="div_4" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_4.jpg');">4번</div></a>
    </div>
    <div id="slider_btn">
        <ul>
            <li>버튼1</li>
            <li>버튼2</li>
            <li>버튼3</li>
            <li>버튼4</li>
        </ul>
    </div>
<script>
$(document).ready(function(){
 
    $("#slider_btn li").click(function(){
        var idx = $(this).index();
        console.log(idx);
        $(".link").css("display","none")
                 .eq(idx).css("display","block");
    });
});
</script>    
</body>
<style>
#slider_showBox a{width:100%; float:left; border:1px solid red; position:relative; display:none; height:100px;}
#slider_btn{float:left; width:100%;}
#slider_btn li { float:left; width:100px; height:30px; border:1px solid red; margin:5px;}
.box{width:100%; height:100%;}
</style>
</html>
cs





예제 2) 번을 실행시켜보면 버튼을 클릭할때 이미지가 웹서버로 부터 로드 되는 것을 알 수 있다.

-- 웹 브라우져 > f12 > 네트워트에서 확인 가능하다.


탭 클릭시 그때서야 이미지가 로드되기 때문에, 홈페이지가 느린것 같은 느낌을 사용자에게 줄 수 있다.



이번에는 visibility:hidden 을 사용한 예제이다.

웹 브라우져 > f12 > 네트워트에서 확인해보면 이미지를 한번에 모두 로드하는 것을 알 수 있다.

페이지를 처음 열었을 때 용량이 큰 이미지의 경우에는 조금 느리게 느껴질 수 있으나, 탭 전환시에는 이미 로드된 이미지를 사용하기 때문에 추가적으로 로딩되는 시간을 필요로 하지 않는다.



예제 3 )


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
<html>
<head></head>
<script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>
<body>
    <div id="slider_showBox">
        <a id="div_1" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_1.jpg');">1번</div></a>
        <a id="div_2" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_2.jpg');">2번</div></a>
        <a id="div_3" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_3.jpg');">3번</div></a>
        <a id="div_4" class="link"><div class="box" style="background-image:url('http://www.gyunbox.zz.am/images/main/image_4.jpg');">4번</div></a>
    </div>
    <div id="slider_btn">
        <ul>
            <li>버튼1</li>
            <li>버튼2</li>
            <li>버튼3</li>
            <li>버튼4</li>
        </ul>
    </div>
<script>
$(document).ready(function(){
 
    $("#slider_btn li").click(function(){
        var idx = $(this).index();
        $(".link").css("visibility","hidden")
                  .eq(idx).css("visibility","visible");
    });
});
</script>    
</body>
<style>
#slider_showBox { height:100px; float:left; width:100%;}
#slider_showBox a{width:100%; float:left; border:1px solid red; 
                  position:relative; display:block; position:absolute; 
                  visibility:hidden; height:100px;}
#slider_btn{float:left; width:100%;}
#slider_btn li { float:left; width:100px; height:30px; border:1px solid red; margin:5px;}
.box{width:100%; height:100%;}
</style>
</html>
cs




"결론은?"



display:none 을 사용하면 노출 돠지 않는 경우에 이미지 자체를 로드 하지 않는다.

이미지 뿐만 아니라 다른 자원도 마찬가지일 것이라고 생각된다.


visibility:hidden 을 사용하면 노출 되지 않는 이미지도 모두 로드된다.


그러니 각 상황에 알맞게 사용하자!


visibility:hidden 을 이용해서 이미지 슬라이더를 만들어 보는 예제는 아래 링크를 통해 확인!


http://gyunbox.tistory.com/entry/jquery-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%8D%94-%ED%83%AD-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%8D%94-setInterval-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%8D%94-%EB%A7%8C%EB%93%A4%EA%B8%B0


"끝"







+ Recent posts