PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

02 February 2010 By
หมุน 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>






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






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


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