สร้าง Swap Banner แบนเนอร์แบบสลับอัตโนมัติ ด้วย jQuery อย่างง่าย

28 October 2009 By Ninenik Narkdee
jquery อัตโนมัติ swap banner

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



ตัวอย่าง สามารถนำไปประยุกต์ใช้ เช่นใส่รูปภาพแบนเนอร์ อื่นๆ ได้

1
2
3
4
5

Javascript code ตัวอย่าง

<script src="http://www.google.com/jsapi" type="text/javascript"></script>  
<script type="text/javascript">  
google.load("jquery", "1.3.2");  
</script>  
<script type="text/javascript">  
$(function(){  
    $("ul#navBannerSwap li").click(function(){ // เมื่อลำดับรายการถูกคลิก
	    $("ul#navBannerSwap li").siblings("li").removeClass("currentShow"); 
		$(this).addClass("currentShow");	
		var gIDdiv=$(this).html();
		var showIDdiv="bannerSwap"+gIDdiv;
		$("div.swapBanner:visible").hide();
		$("div#"+showIDdiv).show();		
		clearTimeout(SwapTimeout);
		SwapTimeout=setTimeout("swapBannerFn("+idBanner+")",timeSwap+timeWaitNextSwap);
	});
});  

var idBanner=1; // ค่าเริ่มต้น
var timeSwap=3000; // กำหนดเวลาสำหรับการสลับข้อมูล 1000 เท่ากับ 1 วินาที
var timeWaitNextSwap=4000; // เวลารอการเริ่มต้นการสลับข้อมูลใหม่ หลังจากคลิกลำดับ
var numMaxSwap=5; // จำนวนรายการข้อมูล
var SwapTimeout=setTimeout("swapBannerFn("+idBanner+")",timeSwap);
function swapBannerFn(idBanner){ // ฟังก์ชันสลับข้อมูล
		if(idBanner<numMaxSwap){			
			idBanner++;
			var showIDdiv="bannerSwap"+idBanner;
			$("div.swapBanner:visible").hide();
			$("div#"+showIDdiv).show();	
			$("ul#navBannerSwap li").removeClass("currentShow");
			$("ul#navBannerSwap li#navBannerSwapP"+idBanner).addClass("currentShow");		
			if(idBanner==numMaxSwap){
				idBanner=0;
				SwapTimeout=setTimeout("swapBannerFn("+idBanner+")",timeSwap);		
			}else{
				SwapTimeout=setTimeout("swapBannerFn("+idBanner+")",timeSwap);			
			}				
		}
}
</script> 

CSS code ตัวอย่าง

<style type="text/css">
div.swapBanner{/* div แสดงข้อมูล */
	display:block;
	width:170px;
	height:170px;
	background-color:#FFFFCC;
	display:none;
}
ul#navBannerSwap{ /* ul สำหรับเก็บ ลำดับรายการ */
	padding:0;margin:0;
	display:block;
	width:170px;
	height:20px;
	float:left;
	background-color:#CCCCFF;
	list-style:none;
}
ul#navBannerSwap li{ /* ลำดับรายการ */
	padding:0;margin:0;
	display:block;
	width:25px;
	height:20px;
	float:left;
	background-color:#FF9999;
	list-style:none;
	text-align:center;
	cursor:pointer;
	margin-right:2px;
}
ul#navBannerSwap li:hover{ /* ลำดับรายการเมื่อเอาเม้าวางไว้เหนือ */
	background-color:#00CCFF;
}
ul#navBannerSwap li.currentShow{ /* ลำดับรายการที่กำลังแสดง หรือถูกคลิก หรือถูกเลือก */
	background-color:#00CCFF;
}
</style>

HTML code ตัวอย่าง

<div id="bannerSwap1" class="swapBanner" style="display:block;">
1
</div>
<div id="bannerSwap2" class="swapBanner">
2
</div>
<div id="bannerSwap3" class="swapBanner">
3
</div>
<div id="bannerSwap4" class="swapBanner">
4
</div>
<div id="bannerSwap5" class="swapBanner">
5
</div>
<ul id="navBannerSwap">
<li id="navBannerSwapP1" class="currentShow">1</li>
<li id="navBannerSwapP2">2</li>
<li id="navBannerSwapP3">3</li>
<li id="navBannerSwapP4">4</li>
<li id="navBannerSwapP5">5</li>
</ul>



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





Tags:: อัตโนมัติ jquery swap banner







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











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