ตัวอย่าง
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>
