点击上下页，实现图片滚动的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="data:images/class1.jpg" width="200" height="130"/></li>
             <li><img src="data:images/class2.jpg" width="200" height="130"/></li>
             <li><img src="data:images/class3.jpg" width="200" height="130"/></li>
             <li><img src="data:images/class4.jpg" width="200" height="130"/></li>
             <li><img src="data:images/class5.jpg" width="200" height="130"/></li>
             <li><img src="data:images/class6.jpg" width="200" height="130"/></li>
          </ul>
       </div>

   </div>
</div>
</body>
</html>

巴特西

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

最新文章

热门文章