<!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代码的更多相关文章

  1. 图片滚动插件jquery bxslider

    https://www.cnblogs.com/axl234/p/4167196.html

  2. 图片滚动（UP）的JS代码详解（offsetTop、scrollTop、offsetHeigh）【转】

    源地址 信息技术教材配套的光盘里有一段设置图片滚动的JS代码,与网络上差不多,实现思路:一个设定高度并且隐藏超出它高度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,dem ...

  3. viewer && ImageFlow 图片滚动组件 图片点击放大 可以滚轮放大缩小 viewer

    ImageFlow https://finnrudolph.com/products/imageflow https://github.com/countzero/ImageFlow http://w ...

  4. Android实现图片滚动控件，含页签功能，让你的应用像淘宝一样炫起来

    首先题外话,今天早上起床的时候,手滑一下把我的手机甩了出去,结果陪伴我两年半的摩托罗拉里程碑一代就这么安息了,于是我今天决定怒更一记,纪念我死去的爱机. 如果你是网购达人,你的手机上一定少不了淘宝客户 ...

  5. javascript实现图片滚动

    闲来无事捣鼓了一个原来的js图片滚动 首先看看 静态页的结构: <body> <a href="javascript: le()">向左</a> ...

  6. 求帮忙解决封装jquery图片滚动问题

    今天用jquery封装了点击图片滚动,但是发现在屏幕自适应时,图片停在的位置会随着屏幕大小而错位(我引入了pocketgrid.css响应式文件,但没办法去那边修改onsize事件...),求大神.. ...

  7. 【精心推荐】12款很好用的 jQuery 图片滚动插件

    这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...

  8. 10款很好用的 jQuery 图片滚动插件

    jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...

  9. jquery层居中,点击小图查看大图,弹出层居中代码，顶部层固定不动，滚动条滚动情况

    jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...

随机推荐

  1. python基础之 optparse.OptionParser

    optparse是专门用来在命令行添加选项的一个模块. 首先来看一段示例代码 from optparse import OptionParser MSG_USAGE = "myprog[ - ...

  2. [Math]Sqrt(x)

    Total Accepted: 75767 Total Submissions: 314003 Difficulty: Medium Implement int sqrt(int x). Comput ...

  3. [Effective Modern C++] Item 5. Prefer auto to explicit type declarations - 相对显式类型声明，更倾向使用auto

    条款5 相对显式类型声明,更倾向使用auto 基础知识 auto能大大方便变量的定义,可以表示仅由编译器知道的类型. template<typename It> void dwim(It ...

  4. [转载]ACM(访问控制模型)，Security Identifiers(SID)，Security Descriptors(安全描述符)，ACL(访问控制列表)，Access Tokens(访问令牌)

    对于<windows核心编程>中的只言片语无法驱散心中的疑惑.就让MSDN中的解释给我们一盏明灯吧.如果要很详细的介绍,还是到MSDN仔细的看吧,我只是大体用容易理解的语言描述一下. wi ...

  5. 痛苦的版本对齐(3) cygwin下的路径引用

    [续<痛苦的版本对齐(2) 和时间的相关性>]http://www.cnblogs.com/yvivid/p/3541142.html 初步定位,如下告警为.depend文件路径问题导致. ...

  6. python基础教程第5章——条件循环和其他语句

    1.语句块是在条件为真(条件语句)时执行或者执行多次(循环语句)的一组语句.在代码前放置空格来缩进语句即可穿件语句块.块中的每行都应该缩进同样的量.在Phyton中冒号(:)用来标识语句块的开始,块中 ...

  7. Lake Counting--poj2386

    Lake Counting Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 23950   Accepted: 12099 D ...

  8. px,dp,dip,sp,in,mm,pt详细分析

    px,dp,dip,sp,in,mm,pt详细分析 px   :(pixels),屏幕的像素点,不同的设备显示效果相同,一般我们HVGA代表320x480像素,这个用的比较多. dip  :(devi ...

  9. 14.3.5.1 Interaction of Table Locking and Transactions 表锁和事务的相互作用

    14.3.5.1 Interaction of Table Locking and Transactions 表锁和事务的相互作用 LOCK TABLES 和UNLOCK TABLES 交互实用事务如 ...

  10. PHP实现好友生日邮件提醒

    我有一个想法是这样的,希望每天知道今天是我哪位好友的生日? 当然,我得首先保存我所有好友的生日信息 实现:在新浪申请免费服务器,并申请Mysql应用,然后建一张表保存好友的信息 我想,我已经完成第一步 ...