ตัวอย่าง
CSS ตัวอย่าง
<style type="text/css">
div#containSlidebanner{
margin:0;
padding:0;
width:500px;
height:250px;
overflow:hidden;
background-color:#FFFF33;
}
ul#slideBanner,ul#slideBanner li{
margin:0;
padding:0;
list-style:none;
float:left;
}
ul#slideBanner{
width:550px;
white-space:nowrap;
}
ul#slideBanner li{
width:100px;
height:250px;
}
li#banner1{
background-color:#CC99CC;
}
li#banner2{
background-color:#99CC66;
}
li#banner3{
background-color:#33CC99;
}
li#banner4{
background-color:#FFFF66;
}
li#banner5{
background-color:#CCFF00;
}
</style>
HTML Code ตัวอย่าง
<div id="containSlidebanner"> <ul id="slideBanner"> <li id="banner1"></li> <li id="banner2"></li> <li id="banner3"></li> <li id="banner4"></li> <li id="banner5"></li> </ul> </div>
jQuery Code ตัวอย่าง
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul#slideBanner li").hover(function(index){
$(this).animate({
width:"300px"
},200);
$(this).prevAll("li").animate({
width:"50px"
},200);
$(this).nextAll("li").animate({
width:"50px"
},200);
},function(){
$(this).stop(true);
$(this).siblings("li").stop(true);
});
$("div#containSlidebanner").hover(function(){
},function(){
$("ul#slideBanner li").animate({
width:"100px"
},200);
});
});
</script>
