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

ตัวอย่าง

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>