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

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
banner jquery swap

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



ตัวอย่าง

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>


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





Tags:: jquery swap banner







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











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