หมุน สลับ แบนเนอร์ในแนวนอน ด้วย jQuery อย่างง่าย

02 February 2010 By Ninenik Narkdee
แนวนอน jquery หมุน banner

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



ตัวอย่าง

  •  
  •  
  •  
  •  
  •  

CSS code ตัวอย่าง

<style type="text/css">
div.containBanner{
	position:relative;
	display:block;
	top:80px;
	left:150px;	
	background-color:#33CCFF;
	overflow:hidden;
}
ul.areaBanner,ul.areaBanner li{
	list-style:none;
	margin:0;
	padding:0;
}
ul.areaBanner{
	position:absolute;
	left:0;
	top:0;
	display:block;
	white-space:nowrap;
}
ul.areaBanner li{
	position:relative;
	display:block;
	float:left;
}
</style>

HTML code ตัวอย่าง

<div class="containBanner">
<ul class="areaBanner">
<li style="background-color:#3399CC;"></li>
<li style="background-color:#66CCCC;"></li>
<li style="background-color:#FFFF99;"></li>
<li style="background-color:#99CC99;"></li>
<li style="background-color:#CC9999;"></li>
</ul>
</div>

jQuery ตัวอย่าง

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
	var timeSwap=2000;
	var listWidth=250;
	var listHeight=100;
	var areaWidth=$("ul.areaBanner li").length*listWidth;
	var a_banner=1;
	var runIT=function(){
		a_banner=(a_banner>=$("ul.areaBanner li").length)?0:a_banner;
		var norwLeft=$("ul.areaBanner li").offset().left;
		norwLeft=a_banner*listWidth;
		$("ul.areaBanner li").animate({
			left:-norwLeft
		},500);
		a_banner++;
	}
	var bannerSwap=function(){
		$("div.containBanner").width(listWidth).height(listHeight);
		$("ul.areaBanner li").width(listWidth).height(listHeight);
		$("ul.areaBanner").width(areaWidth);
		setInterval(function(){
			runIT();
		},timeSwap);	
	}
	bannerSwap();
});
</script>


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





Tags:: หมุน แนวนอน jquery banner







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











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