สร้างระบบ slide เลื่อนซ้าย ขวา ด้วย jquery อย่างง่าย

เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee
เลื่อนซ้าย slide jquery เลื่อนขวา

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ เลื่อนซ้าย slide jquery เลื่อนขวา

ดูแล้ว 62,695 ครั้ง




CSS Code ต้วอย่าง

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
<style type="text/css">
span#slide_box_sp{
    display:block;
    float:left;
}
div.go_l_nav{
    display:block;
    cursor:pointer;
    background-color:red;
    float:left;
}
div.go_r_nav{
    display:block;
    cursor:pointer;
    background-color:red;
    float:left;
}
div.content_slide{
    display:block;
    margin:0px;
    float:left;
    overflow:hidden;
}
a.list_nav{
    font-size:11px;
    text-align:center;
    float:left;
    margin:0px;
    background-color:#FFFF66;
    color:#333333;
}
a.list_nav:hover{
    font-size:11px;
    text-align:center;
    float:left;
    margin:0px;
    background-color:#99FF33;
    color:#621cc4; 
}
div#content_slide_in{
    display:block;
    margin-left:0px;
}
</style>

HTML Code ต้วอย่าง

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<span id="slide_box_sp">
<div class="go_l_nav" title="Back"></div>
<div class="content_slide">
<div id="content_slide_in">
<a href="#" class="list_nav">รูป หรือ ข้อความ 1</a>
<a href="#" class="list_nav">รูป หรือ ข้อความ 2</a>
<a href="#" class="list_nav">รูป หรือ ข้อความ 3</a>
<a href="#" class="list_nav">รูป หรือ ข้อความ 4</a>
<a href="#" class="list_nav">รูป หรือ ข้อความ 5</a>
<a href="#" class="list_nav">รูป หรือ ข้อความ 6</a>
<a href="#" class="list_nav">รูป หรือ ข้อความ 7</a>
<a href="#" class="list_nav">รูป หรือ ข้อความ 8</a>
</div>
</div>
<div class="go_r_nav" title="Next"></div>
</span>

Javascript Code ตัวอย่าง

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
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript">
$(function(){
    // เริ่มส่วนที่่ควรปรับแต่ง
    var box_w=100;  // กำหนดความกว้างของแต่ละ box
    var box_h=100;  // กำหนดความสูงของ slide
    var box_show=4;  // กำหนดจำนวนรายการที่จะแสดงเริ่มต้น
    var nav_w=30;   // กำหนดความกว้างของตัวเลื่อยนซ้าย ขวา
    var marGL=2;     // กำหนดระยะห่างของแต่ละ box
    // สิ้นสุดส่วนที่ควรปรับแต่ง
    var slide_w=(box_show*(marGL+box_w))+(nav_w*2)+marGL
    var content_w=(box_show*(marGL+box_w));
    var nol_nav_l,new_nev_l=null;
    $("span#slide_box_sp").width(slide_w);
    $("a.list_nav").width(box_w).css("marginLeft",marGL);
    $("span#slide_box_sp,span#slide_box_sp *").height(box_h);
    $("div.go_l_nav,div.go_r_nav").width(nav_w);
    $("div.go_r_nav").css("marginLeft",marGL);
    $("div.content_slide").width(content_w);
    $("div#content_slide_in").css("marginLeft","0px");
    $("div.go_r_nav").click(function(){
        var numA=$("div#content_slide_in > a").length-box_show;
        numA=numA*(box_w+marGL);
        var charA="-"+numA+"px";
        now_nav_l=$("div#content_slide_in").css("marginLeft");
        if(now_nav_l!=charA){
            now_nav_l=now_nav_l.replace("px","");
            new_nav_l=now_nav_l-box_w-marGL;
            $("div#content_slide_in").animate({
                marginLeft:new_nav_l
            },100);
        }
    });
    $("div.go_l_nav").click(function(){
        now_nav_l=$("div#content_slide_in").css("marginLeft");
        if(now_nav_l!="0px"){
            now_nav_l=now_nav_l.replace("px","");
            now_nav_l=parseInt(now_nav_l);
            new_nav_l=now_nav_l+box_w+marGL;
            $("div#content_slide_in").animate({
                marginLeft:new_nav_l
            },100);
        }
    });        
});
</script>

ตัวอย่าง

รูป หรือ ข้อความ 1 รูป หรือ ข้อความ 2 รูป หรือ ข้อความ 3 รูป หรือ ข้อความ 4 รูป หรือ ข้อความ 5 รูป หรือ ข้อความ 6 รูป หรือ ข้อความ 7 รูป หรือ ข้อความ 8


ตัวอย่างโค้ดแบบเต็ม
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css"> 
    span#slide_box_sp{ 
        display:block; 
        float:left; 
    } 
    div.go_l_nav{ 
        display:block; 
        cursor:pointer; 
        background-color:red; 
        float:left; 
    } 
    div.go_r_nav{ 
        display:block; 
        cursor:pointer; 
        background-color:red; 
        float:left; 
    } 
    div.content_slide{ 
        display:block; 
        margin:0px; 
        float:left; 
        overflow:hidden; 
    } 
    a.list_nav{ 
        font-size:11px; 
        text-align:center; 
        float:left; 
        margin:0px; 
        background-color:#FFFF66; 
        color:#333333; 
    } 
    a.list_nav:hover{ 
        font-size:11px; 
        text-align:center; 
        float:left; 
        margin:0px; 
        background-color:#99FF33; 
        color:#621cc4;   
    } 
    div#content_slide_in{ 
        display:block; 
        margin-left:0px; 
    } 
    </style>     
</head>
<body>
     
  
     
<div style="margin:auto;width:800px;">
 
<span id="slide_box_sp"> 
<div class="go_l_nav" title="Back"></div> 
<div class="content_slide"> 
<div id="content_slide_in"> 
<a href="#" class="list_nav">รูป หรือ ข้อความ 1</a> 
<a href="#" class="list_nav">รูป หรือ ข้อความ 2</a> 
<a href="#" class="list_nav">รูป หรือ ข้อความ 3</a> 
<a href="#" class="list_nav">รูป หรือ ข้อความ 4</a> 
<a href="#" class="list_nav">รูป หรือ ข้อความ 5</a> 
<a href="#" class="list_nav">รูป หรือ ข้อความ 6</a> 
<a href="#" class="list_nav">รูป หรือ ข้อความ 7</a> 
<a href="#" class="list_nav">รูป หรือ ข้อความ 8</a> 
</div> 
</div> 
<div class="go_r_nav" title="Next"></div> 
</span>         
     
</div>        
           
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript">
$(function(){
 
   // เริ่มส่วนที่่ควรปรับแต่ง 
    var box_w=100;  // กำหนดความกว้างของแต่ละ box 
    var box_h=100;  // กำหนดความสูงของ slide 
    var box_show=4;  // กำหนดจำนวนรายการที่จะแสดงเริ่มต้น 
    var nav_w=30;   // กำหนดความกว้างของตัวเลื่อยนซ้าย ขวา 
    var marGL=2;     // กำหนดระยะห่างของแต่ละ box  
    // สิ้นสุดส่วนที่ควรปรับแต่ง 
    var slide_w=(box_show*(marGL+box_w))+(nav_w*2)+marGL 
    var content_w=(box_show*(marGL+box_w)); 
    var nol_nav_l,new_nev_l=null; 
    $("span#slide_box_sp").width(slide_w); 
    $("a.list_nav").width(box_w).css("marginLeft",marGL); 
    $("span#slide_box_sp,span#slide_box_sp *").height(box_h); 
    $("div.go_l_nav,div.go_r_nav").width(nav_w); 
    $("div.go_r_nav").css("marginLeft",marGL); 
    $("div.content_slide").width(content_w); 
    $("div#content_slide_in").css("marginLeft","0px"); 
    $("div.go_r_nav").click(function(){ 
        var numA=$("div#content_slide_in > a").length-box_show; 
        numA=numA*(box_w+marGL); 
        var charA="-"+numA+"px"; 
        now_nav_l=$("div#content_slide_in").css("marginLeft"); 
        if(now_nav_l!=charA){ 
            now_nav_l=now_nav_l.replace("px",""); 
            new_nav_l=now_nav_l-box_w-marGL; 
            $("div#content_slide_in").animate({ 
                marginLeft:new_nav_l 
            },100); 
        } 
    }); 
    $("div.go_l_nav").click(function(){ 
        now_nav_l=$("div#content_slide_in").css("marginLeft"); 
        if(now_nav_l!="0px"){ 
            now_nav_l=now_nav_l.replace("px",""); 
            now_nav_l=parseInt(now_nav_l); 
            new_nav_l=now_nav_l+box_w+marGL; 
            $("div#content_slide_in").animate({ 
                marginLeft:new_nav_l 
            },100); 
        } 
    });              
     
});
</script>      
     
</body>
</html>


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: slide เลื่อนซ้าย เลื่อนขวา jquery







URL สำหรับอ้างอิง












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ