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. awk技巧

    1通过awk脚本执行awk程序:awk-f program_file_name input_files #!/bin/awk -f BEGIN { print "What is your n ...

  2. POJ2369 Permutations【置换群】

    题目链接: http://poj.org/problem?id=2369 题目大意: 给定一个序列.问最少须要多少次置换才干变为 1.2.-.N 的有序序列.比方说给 定5个数的序列 4 1 5 2 ...

  3. D3.js 整体展示篇

    近期一段时间研究社会成员网络关系图的一些可视化展示,对大数据可视化这片荒漠一筹莫展的自己,幸好发现了D3这片充满活力的绿洲.我决定在这块宝地贪婪地大餐一番. 本文介绍主要来自官网翻译及用户使用后感想资 ...

  4. Android入门篇（一）Androidproject的搭建，导入与导出，图标的改动

       先说一些题外话吧.这是小珂同学的处女作.可能写的不好,请各位读者见谅.我先讲讲我为什么要写博文,那应该也是机缘巧合,有一次.我问学长一个问题,学长发了一个连接给我,里面是一篇博客.那时我仅仅是看 ...

  5. CODE ---代码助手 (保存代码、搜代码、生成网页、自由界面)

    四大功能 1  保存代码 2  搜索代码 3  生成网页 4  自由界面 www.gudianxiaoshuo.com

  6. acme.sh建立SAN证书 和泛域名证书

    文件来源 https://github.com/Neilpang/acme.sh/wiki/How-to-issue-a-cert domain=$domain time=`date +%Y%m%d% ...

  7. BZOJ 1082 暴搜

    思路: //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm> using ...

  8. POJ - 3847 Moving to Nuremberg 动归

    POJ - 3847 Moving to Nuremberg 题意:一张无向有权图,包括边权和点权,求一点,使得到其他点的点权*边权之和最小 思路: #pragma comment(linker, & ...

  9. 【基础篇】DatePickerDialog日期控件的基本使用(二) ——分别获取年、月、日、时、分

    项目步骤: 1.在Main.xml布局文件中定义对应的组件,Main.xml内容如下: <?xml version="1.0" encoding="utf-8&qu ...

  10. js创建dom操作select

    document.getElementById("column-left").getElementsByTagName("header")[0].onclick ...