PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

03 June 2009 By
jquery เลื่อนซ้าย slide เลื่อนขวา

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





CSS Code ต้วอย่าง

<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 ต้วอย่าง

<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 ตัวอย่าง

<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>

ตัวอย่าง



ตัวอย่างโค้ดแบบเต็ม
<!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>






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






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


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