基于jQuery的一组图片的滚动

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的一组图片的滚动的更多相关文章

基于jQuery适合做图片类网站的特效
分享一款基于jquery适合做图片类网站的特效.这是一款鼠标经过图片滑动弹出标题效果代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="c ...
一款基于jquery的手风琴图片展示效果
今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览源码下载实现的代码. html代码: &l ...
基于jquery鼠标或者移动端滚动加载数据
基于jquery鼠标或者移动端滚动加载数据 var stop = true; // 防止重复请求数据 $(window).scroll(function () { totalheight = pars ...
基于jQuery的自适应图片左右切换
效果预览:http://hovertree.com/code/jquery/smjv6d0n.htm 基于jQuery编写的横向自适应幻灯片切换特效全屏自适应jquery焦点图切换特效,在IE6这个 ...
CSS和jQuery分别实现图片无缝滚动效果
一.效果图二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
基于jQuery 常用WEB控件收集
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...
一些基于jQuery开发的控件
基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-a ...
Jquery+css实现图片无缝滚动轮播
Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...
使用UIScrollView 结合 UIImageView 实现图片循环滚动
场景: 在开发工作中,有时我们需要实现一组图片循环滚动的情况.当我们使用 UIScrollView 结合 UIImageView 来实现时,一般 UIImageView 会尽量考虑重用,下面例子是以( ...

随机推荐

协变 & 逆变
都跟里氏替换原则有关. 协变:你可以用一个子类对象去替换相应的一个父类对象,这是完全符合里氏替换原则的,和协(谐)的变.如:用Swan替换Bird. 逆变:你可以用一个父类对象去替换相应的一个子类对象 ...
开源企业IM-免费企业即时通讯-ENTBOOST V0.9版本号公布
ENTBOOST V0.9版本号公布,更新内容:1.完好多人群组聊天,提高群组聊天性能及稳定性:2.苹果IOS SDK.添加联系人管理功能,优化API和内部流程.修复部分BUG.3.添加企业应用功能集 ...
实习第一天（安装svn管理工具跟tomcat插件）
在eclipse中安装svn管理解压工具是有好几种方法. 方法1 1>可以直接下载svn插件subclipse,之后进行解压 2>然后将将插件包features和plugins目录中的文件 ...
RPC和Socket
RPC和Socket的区别 rpc是通过什么实现啊?socket! RPC(Remote Procedure Call,远程过程调用)是建立在Socket之上的,出于一种类比的愿望,在一台机器上运行的 ...
HDU2665 kth number 线段树做法
题意:求区间第k小思路: 线段树每个节点上保存当前区间已经排序好的序列 (归并一下就好了嘛复杂度 O(l)的) 这样建树的时空复杂度都是 O(nlogn)的对于每次询问二分一个答案在树 ...
我在看着你呢——shiro学习
说实话开学第一周效率并不高.项目该结的都差不多结了,看来这毛病我是养成了.项目忙的要死的时候,想休息想停一停就不断往下扔包袱.一下没项目了开学了,反倒开始手痒,捉摸着写点什么代码.马上我的小mac就要 ...
用vuex构建单页
原文地址:点我前言:在最近学习 Vue.js 的时候,看到国外一篇讲述了如何使用 Vue.js 和 Vuex 来构建一个简单笔记的单页应用的文章.感觉收获挺多,自己在它的例子的基础上进行了一些优化和 ...
JAVA文件写入FileWriter
JAVA文件写入FileWriter 导包import java.io.FileWriter创建构造方法public FileWrite(String filename),参数是文件的路径及文件名(默 ...
JS关键字 import
今天开发时使用import作为方法名,报错后查明报错原因:import是js中的关键字,在取方法名时不能取import
【Uva 10285】Longest Run on a Snowboard
[Link]: [Description] 在一个r*c的格子上; 求最长的下降路径; [Solution] 记忆化搜索; f[x][y]表示从(x,y)这个格子往下还能走多远; 因为是严格递增,所以 ...

基于jQuery的一组图片的滚动

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

随机推荐

热门专题