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

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

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