PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


สร้าง swap แบนเนอร์ effect แบบ fade ด้วย jQuery อย่างง่าย

06 November 2009 By
swap jquery banner

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



ตัวอย่าง

Text 1

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">  
/*	กำหนดเวลาสำหรับการเปลี่ยนรูปภาพ 1000 เท่ากับ 1 วินาที*/
var timeSwap=4000;

/*	กำหนดตัวแปร array สำหรับเก็บ ลิ้งค์*/
var jsBannerLink=new Array();
jsBannerLink[0]="#Link1";
jsBannerLink[1]="#Link2";
jsBannerLink[2]="#Link3";

/*	กำหนดตัวแปร array สำหรับเก็บ รูปภาพ*/
var jsBannerPic=new Array();
jsBannerPic[0]="images/sample_banner01.jpg";
jsBannerPic[1]="images/sample_banner02.jpg";
jsBannerPic[2]="images/sample_banner03.jpg";

/*	กำหนดตัวแปร array สำหรับเก็บ ข้อความ*/
var jsBannerText=new Array();
jsBannerText[0]="Text 1";
jsBannerText[1]="Text 2";
jsBannerText[2]="Text 3";

var TimeInterV=setTimeout("swapFront()",timeSwap);
var jsKeyPic=0;
var jsEndKeyPic=(jsBannerPic.length)-1;
function swapFront(){
	if(jsKeyPic<jsEndKeyPic){
		jsKeyPic++;
	}else{
		jsKeyPic=0;
	}
	$("img#fadeSwapPic").animate({
		opacity:0.1
	},100,'',function(){
		$("img#fadeSwapPic").attr("src",jsBannerPic[jsKeyPic]);
		$("a#fadeSwapLink").attr("href",jsBannerLink[jsKeyPic]);
		$("div#fadeSwapText").html(jsBannerText[jsKeyPic]);
		$("img#fadeSwapPic").animate({
			opacity:1
		},500);
		setTimeout("swapFront()",timeSwap);	
	});
}	
</script> 

CSS Code ตัวอย่าง

<style type="text/css">
/*	กำหนด CSS ของลิ้งค์*/
a#fadeSwapLink{	   
	display:block;
	width:260px;
	height:170px;
	text-decoration:none;
}
/*	กำหนด CSS ของรูป*/
img#fadeSwapPic{
	float:left;
	border:1px solid #CCCCCC;
	background-color:#FFFFFF;
	padding:3px;
}
/*	กำหนด CSS ของข้อความ*/
div#fadeSwapText{
	color:#333333;
}
</style>

HTML Code ตัวอย่าง

<!--แสดงค่าเริ่มต้น-->
<a href="#Link1" id="fadeSwapLink">
<img src="images/sample_banner01.jpg" id="fadeSwapPic" />
<div id="fadeSwapText">Text 1</div>
</a>






Tags:: swap banner jquery






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


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