点击上下页，实现图片滚动的jquery代码

<!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{ width:980px; height:auto;margin:auto; position:absolute}
.m_caption{ width:980px; height:50px; background:#09F}
.mc1{ width:200px; float:left;}
.mc1 span{ display:inline-block; width:30px; height:10px; background:#9C9; margin-right:10px;}
.mc1 span.current{ display:inline-block; width:30px; height:10px; margin-right:10px;background:red}
.mc2{ width:300px; float:left}
.mc2 span{display:inline-block; width:70px; margin-right:20px;}
.m_contain{ margin-top:30px; width:450px; position:absolute;}
.m_contain_list{ width:450px; height:130px; position:relative;overflow:hidden; border:1px red solid; margin:auto; padding:20px 0 20px 0;}
.m_contain_list ul{ width:1320px; margin:auto; height:130px; position:relative}
.m_contain_list ul li{ float:left; width: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>

posted @ 2015-07-04 15:45  cmwang2017  阅读(257)  评论(0)  编辑  收藏  举报