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

ตัวอย่าง

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>