พี่นิกช่วยเรื่องเขียนการแสดงรูปแบบเหมือน FB หน่อยครับ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา พี่นิกช่วยเรื่องเขียนการแสดงรูปแบบเหมือน FB หน่อยครับ

พี่นิกช่วยเรื่องเขียนการแสดงรูปแบบเหมือน FB หน่อยครับ

อยากได้แสดงผลเหมือน fb อ่ะครับ มีกด ภาพก่อนหน้านี้ ภาพถัดไป

พอภาพสุดท้ายแล้วก็ให้วนมาเป็นภาพแรก

พอกดมาสุดภาพแรกก็ให้วนไปภาพสุดท้าย

อะไรแบบนี้อ่ะคับ ว่างๆช่วยหน่อยนะครับพี่

ขอบคุณครับ 



Cpuhost 19-02-2012 21:54:15

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

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


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


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

 ความคิดเห็นที่ 1

 ตัวอย่าง

Previous | Next

ตัวอย่างโค้ดทั้งหมด

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body>



<script type="text/javascript">
var imgObjects = []; // สร้าง ตัวแปร array ไว้กำหนด Image Object
var jsBannerPic=[];
var jsBannerPic=new Array(
	"http://a2.sphotos.ak.fbcdn.net/hphotos-ak-ash4/s720x720/429488_10150574791012871_92144637870_8854162_1333547120_n.jpg",
	"http://a4.sphotos.ak.fbcdn.net/hphotos-ak-ash4/s720x720/429488_10150574791007871_92144637870_8854161_1764350659_n.jpg",
	"http://a1.sphotos.ak.fbcdn.net/hphotos-ak-snc7/422810_10150556780952871_92144637870_8805562_1223070770_n.jpg",
	"http://a3.sphotos.ak.fbcdn.net/hphotos-ak-ash4/422810_10150556780932871_92144637870_8805561_676037468_n.jpg",
	"http://a5.sphotos.ak.fbcdn.net/hphotos-ak-snc7/422810_10150556780927871_92144637870_8805560_1897242116_n.jpg",
	"http://a7.sphotos.ak.fbcdn.net/hphotos-ak-snc7/s720x720/388464_10150520078907871_92144637870_8703214_445582641_n.jpg"
);
for(i=0;i<jsBannerPic.length;i  ){
	imgObjects[i] = new Image();
	imgObjects[i].src=jsBannerPic[i];
}

</script>

<a  href="#" id="navi_prev">Previous</a>   |   <a href="#" id="navi_next" >Next</a><br />
<img id="prev_img" src=""  />


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>  
<script type="text/javascript">
var begin_i=0;
$(function(){
	$("#prev_img").attr("src",jsBannerPic[0]);
	$("#navi_prev").click(function(e){
		e.preventDefault();
		begin_i--;
		if(begin_i<=0){
			begin_i=jsBannerPic.length;
			begin_i--;
		}
		$("#prev_img").attr("src",jsBannerPic[begin_i]);		
	});
	$("#navi_next").click(function(e){
		e.preventDefault();
		begin_i++;
		if(begin_i>=jsBannerPic.length){
			begin_i=0;
		}		
		$("#prev_img").attr("src",jsBannerPic[begin_i]);		
	});	
});
</script>
</body>
</html>

 



ninenik 21-02-2012
 ความคิดเห็นที่ 2

 ขอบคุณมากครับพี่ เดียวนำไปประยุกต์ใช้ต่อไปอีกทีครับผม ได้แนวทางในการเขียนละ jquery ยิ่งอ่อนหัดอยู่ ^ ^



cpuhost 22-02-2012 09:41






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