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

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

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

ดูแล้ว 61,707 ครั้ง




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>


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











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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ