效果如下所示:
代码如下所示:
主要是利用了animate方法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="jquery/jquery.js"></script>
<style type="text/css">
ul{
list-style: none;
}
ul li{
float:left;
}
#prevBtn,#nextBtn{
width:80px;height:25px;
}
.tab_list{
width:600px;overflow:hidden;height:200px;padding:0px;margin:0px;margin-left:50px;border:10px solid #cccccc;
}
.tab_item{
width:184px;height:184px;margin:8px;
}
</style>
<script type="text/javascript">
var num = -1;
var totalNum = 8;
jQuery(document).ready(function(){
jQuery("#prevBtn").click(function(){
if(num < 4){
num++;
}
jQuery(this).parent().next().children().eq(num).stop().animate({
marginLeft:"-250px"
},500);
});
jQuery("#nextBtn").click(function(){
if(num >= 0){
jQuery(this).parent().next().children().eq(num).stop().animate({
marginLeft:"0px"
},500);
num--;
}
});
});
</script>
</head>
<body>
<div style="margin:58px;">
<input type="button" id="prevBtn" value="向前"/>
<input type="button" id="nextBtn" value="向后"/>
</div>
<ul class="tab_list">
<li><div class="tab_item" style="background:red;"/></li>
<li><div class="tab_item" style="background:black;"/></li>
<li><div class="tab_item" style="background:blue;"/></li>
<li><div class="tab_item" style="background:orange;"/></li>
<li><div class="tab_item" style="background:green;"/></li>
<li><div class="tab_item" style="background:pink;"/></li>
<li><div class="tab_item" style="background:yellow;"/></li>
<li><div class="tab_item" style="background:brown;"/></li>
</ul>
</body>
</html>