css:

.displayB{display:block;}.fl{float:left;}.fr{float: right;}.posAb{position: absolute;}.posRe{position: relative;}.margin0Auto{margin: 0 auto;}

    .qS_picBox{width: 1000px;height: 550px;padding-bottom: 20px;}

    .qS_switchIcon{width: 39px;height: 71px;margin-top: 235px;}

    .qs_pic{width: 760px;height: 450px;margin: 45px 0 0 80px;}

    .qS_picBottom{width: 1340px;height: 130px;padding-bottom: 160px;}

    .qS_switchIcon2{width: 39px;height: 71px;margin-top: 30px;}

    .qS_botPicBox{height: 100%;margin-left: 35px;overflow: hidden;}

    .qS_botPicBoxIn{width: 20000px;height: 100%;}

    .qS_botPic:nth-of-type(5n){margin-right: 0!important;}

    .qS_botPic{width: 220px;height: 130px;margin-right: 25px;}

html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>****</title>

</head>

<body>

<article class="qS_picBottom margin0Auto">

    <i class="displayB qS_switchIcon2 fl cursor qS_pre"><img src="../img/qS_pre.png" alt="" class="mI_img"></i>

    <article class="fl qS_botPicBox w posRe">

        <section class="qS_botPicBoxIn posAb">

            <i class="displayB qS_botPic fl"><img class="mI_img" src="../img/qs_pic1.png" alt=""></i>

            <i class="displayB qS_botPic fl"><img class="mI_img" src="../img/qs_pic1.png" alt=""></i>

            <i class="displayB qS_botPic fl"><img class="mI_img" src="../img/qs_pic1.png" alt=""></i>

            <i class="displayB qS_botPic fl"><img class="mI_img" src="../img/qs_pic1.png" alt=""></i>

            <i class="displayB qS_botPic fl"><img class="mI_img" src="../img/qs_pic1.png" alt=""></i>

            <i class="displayB qS_botPic fl"><img class="mI_img" src="../img/qs_pic1.png" alt=""></i>

            <i class="displayB qS_botPic fl"><img class="mI_img" src="../img/qs_pic1.png" alt=""></i>

            <i class="displayB qS_botPic fl"><img class="mI_img" src="../img/qs_pic1.png" alt=""></i>

            <i class="displayB qS_botPic fl"><img class="mI_img" src="../img/qs_pic1.png" alt=""></i>

        </section>

    </article>

    <i class="displayB qS_switchIcon2 fr cursor qS_next"><img src="../img/qS_next.png" alt="" class="mI_img"></i>

</article>

</body>

</html>

js:

$(function () {

        ~(function() {

            var page = 1;

            var num = 5;

            var _pre = $(".qS_pre");

            var _next = $(".qS_next");

            var _boxIn = $(".qS_botPicBoxIn");

            var _width = $(".qS_botPicBox").width();

            var _picLen = $(".qS_botPic").length;

            var _pageCount = Math.ceil(_picLen/num);//滚动的页码

            _pre.click(function() {

            /*原理：1.布局：两层盒子，外层固定宽度并且相对定位，里层盒子无穷大宽度并且绝对定位。

                    2.运动：点击时判断里层盒子是个否处在动画状态中，不在动画状态中时进行运动。运动时每次运动一个外层宽度的单位。

            */

                if(!_boxIn.is(":animated")){//判断元素是否处在动画状态

                    if(page == 1){//当前第一页

                        _boxIn.animate({left:'-='+ _width*(_pageCount-1)},"slow");//里层总宽度*（图片的总数/可显示的个数-1）

                        page =_pageCount;

                    }else{

                        _boxIn.animate({left:'+='+ _width},"slow");//不是当前第一页时不断地加一个宽度

                        page--;

                    }

                }

            });

            _next.click(function() {

                if(!_boxIn.is(":animated")){

                    if(page == _pageCount){

                        _boxIn.animate({left:'0px'},"slow");

                        page =1;

                    }else{

                        _boxIn.animate({left:'-='+_width},"slow");

                        page++;

                    }

                }

            });

        })();

    });

基于jQuery的一组图片的滚动的更多相关文章

  1. 基于jQuery适合做图片类网站的特效

    分享一款基于jquery适合做图片类网站的特效.这是一款鼠标经过图片滑动弹出标题效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="c ...

  2. 一款基于jquery的手风琴图片展示效果

    今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  3. 基于jquery鼠标或者移动端滚动加载数据

    基于jquery鼠标或者移动端滚动加载数据 var stop = true; // 防止重复请求数据 $(window).scroll(function () { totalheight = pars ...

  4. 基于jQuery的自适应图片左右切换

    效果预览:http://hovertree.com/code/jquery/smjv6d0n.htm 基于jQuery编写的横向自适应幻灯片切换特效 全屏自适应jquery焦点图切换特效,在IE6这个 ...

  5. CSS和jQuery分别实现图片无缝滚动效果

    一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  6. 基于jQuery 常用WEB控件收集

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...

  7. 一些基于jQuery开发的控件

    基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-a ...

  8. Jquery+css实现图片无缝滚动轮播

    Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...

  9. 使用UIScrollView 结合 UIImageView 实现图片循环滚动

    场景: 在开发工作中,有时我们需要实现一组图片循环滚动的情况.当我们使用 UIScrollView 结合 UIImageView 来实现时,一般 UIImageView 会尽量考虑重用,下面例子是以( ...

随机推荐

  1. android中文网站

    Google Developers中国网站发布 用户评价:  / 55 差好  最后更新于 2016年12月09日 点击数:15209   我们很高兴地宣布,Google Developers 中国网 ...

  2. 如何判断自己IP是内网IP还是外网IP

    tcp/ip协议中,专门保留了三个IP地址区域作为私有地址,其地址范围如下: 10.0.0.0/8:10.0.0.0-10.255.255.255  172.16.0.0/12:172.16.0.0- ...

  3. Redis封装之Hash

    RedisHashService: /// <summary> /// Hash:类似dictionary,通过索引快速定位到指定元素的,耗时均等,跟string的区别在于不用反序列化,直 ...

  4. Windows平台下使用pthreads开发多线程应用

    pthreads简介 POSIX 1003.1-2001标准定义了编写多线程应用程序的API(应用程序编程接口),这个接口通常被称为pthreads.在常见的操作系统中,例如Unix.Linux.Ma ...

  5. java 返回json格式的数据

    1 阿里巴巴的fastjson import com.alibaba.fastjson.JSON; 使用的时候 JSON.toJSON(list); 2  Gson 解析json数据 import c ...

  6. Atcoder ABC 069 C - 4-adjacent D - Grid Coloring

    C - 4-adjacent Time limit : 2sec / Memory limit : 256MB Score : 400 points Problem Statement We have ...

  7. [Chromium文档转载，第001章] Mojo Migration Guide

        For Developers‎ > ‎Design Documents‎ > ‎Mojo‎ > ‎ Mojo Migration Guide 目录 1 Summary 2 H ...

  8. 深入浅出WPF 第一部分(3)

    3.2.3 属性元素 <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> ...

  9. RvmTranslator6.0 - AVEVA Marine Hull Model

    eryar@163.com 1. Introduction RvmTranslator can translate the RVM file exported by AVEVA Plant(PDMS) ...

  10. SQL 增删改查（具体）

    一.增:有3种方法 1.使用insert插入单行数据: insert [into] <表名> [列名] values <列值> insert into Strdents (na ...