<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<style type="text/css">
*{ margin:0px; padding:0px; list-style-type:none}
.main{ 980px; height:auto;margin:auto; position:absolute}
.m_caption{ 980px; height:50px; background:#09F}
.mc1{ 200px; float:left;}
.mc1 span{ display:inline-block; 30px; height:10px; background:#9C9; margin-right:10px;}
.mc1 span.current{ display:inline-block; 30px; height:10px; margin-right:10px;background:red}
.mc2{ 300px; float:left}
.mc2 span{display:inline-block; 70px; margin-right:20px;}
.m_contain{ margin-top:30px; 450px; position:absolute;}
.m_contain_list{ 450px; height:130px; position:relative;overflow:hidden; border:1px red solid; margin:auto; padding:20px 0 20px 0;}
.m_contain_list ul{ 1320px; margin:auto; height:130px; position:relative}
.m_contain_list ul li{ float:left; 200px; height:130px; margin-left:20px}
</style>
<script type="text/javascript">
$(function(){
var page=1;
var i=2;
$("span.next").click(function(){
var $main=$(".main");
var $m_contain=$main.find("div.m_contain");
var $m_contain_list=$m_contain.find("div.m_contain_list ul");
var width=$m_contain.width();
var len=$m_contain_list.find("li").length;
//向上取整 3
var page_count=Math.ceil(len/i);
if(!$m_contain_list.is(":animated")){
if(page == page_count){//说明已经到了最后一页了
$m_contain_list.animate({left:"0px"},1000);
page=1;
}
else{
$m_contain_list.animate({left:"-="+width},1000);
page ++;
}
}
$main.find(".mc1 span").eq((page-1)).addClass("current").siblings().removeClass("current");
});
$("span.pre").click(function(){
var $main=$(".main");
var $m_contain=$main.find("div.m_contain");
var $m_contain_list=$m_contain.find("div.m_contain_list ul");
var width=$m_contain.width();
var len=$m_contain_list.find("li").length;
//向上取整 3
var page_count=Math.ceil(len/i);
if(!$m_contain_list.is(":animated")){
if(page == 1){//说明已经是第一页了
$m_contain_list.animate({left:"-="+width*(page_count-1)},1000);
page=page_count;
}
else{
$m_contain_list.animate({left:"+="+width},1000);
page --;
}
}
$main.find(".mc1 span").eq((page-1)).addClass("current").siblings().removeClass("current");
});
});
</script>
<body>
<div class="main">
<div class="m_caption">
<p class="mc1">
<span class="current"></span><span></span><span></span>
</p>
<p class="mc2">
<span class="pre">上一页</span><span class="next">下一页</span>
</p>
</div>
<div class="m_contain">
<div class="m_contain_list">
<ul>
<li><img src="images/class1.jpg" width="200" height="130"/></li>
<li><img src="images/class2.jpg" width="200" height="130"/></li>
<li><img src="images/class3.jpg" width="200" height="130"/></li>
<li><img src="images/class4.jpg" width="200" height="130"/></li>
<li><img src="images/class5.jpg" width="200" height="130"/></li>
<li><img src="images/class6.jpg" width="200" height="130"/></li>
</ul>
</div>
</div>
</div>
</body>
</html>