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

เขียนเมื่อ 10 ปีก่อน โดย 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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











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











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