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

เขียนเมื่อ 11 ปีก่อน โดย Ninenik Narkdee
อัตโนมัติ banner swap jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ อัตโนมัติ banner swap 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>



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











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











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