[ 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



"끝"






저작자표시

'웹프로그래밍 > JQUERY' 카테고리의 다른 글

jQuery 타이머 / jQuery 타이머 만들기 / 스톱, 스타드 구현  (0) 2019.11.01
[ jquery ] 팝업 마스크 / 레이어 팝업 / 배경이 가려진 팝업 뛰우기  (3) 2016.07.29
jQuery 4일째 (ajax)  (0) 2014.07.31

+ Recent posts

티스토리툴바