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

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

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





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>

ตัวอย่าง

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


ตัวอย่างโค้ดแบบเต็ม
<!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
หรือ
Privacy Policy
Author
2023 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ