PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

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

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



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

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>







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






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


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