jquery详解图片平滑滚动

随便写了个DOM，没有美观性，见谅

原理：
1、定义两组ul列表放图，第一个ul放5张图，第二个ul为空
2、为什么要用两个ul？因为要用到jQuery的克隆方法clone()。把第一个ul的图片全部克隆到第二个ul中，形成并列无缝滚动效果
3、.box设置为绝对定位，.wrap设置为相对定位
4、设置定时器，让.box的left值一直减-，当left值大于第一个ul的长度时，让他left等于0，然后再重新重置定时器，继续执行

代码部分：

//CSS

*{margin: 0;padding: 0}

ul{list-style: none}

.box ul li{display: block;float: left;width: 300px;height: 300px;margin-right: -1px;background-size: cover;background-position: center center;}

.box{height: 300px;width:3010px;}

#box1,#box2{float: left}

.wrap{position: relative;width: 800px;margin: auto;height: 300px;overflow: hidden}

.box{position: absolute;left: 0;}
//HTML

<body>

    <div class="wrap">

        <div class="box">

            <ul id="box1">

                <li style="background:url(images/1.jpg) no-repeat"></li>

                <li style="background:url(images/2.jpg) no-repeat"></li>

                <li style="background:url(images/3.jpg) no-repeat"></li>

                <li style="background:url(images/4.jpg) no-repeat"></li>

                <li style="background:url(images/5.jpg) no-repeat"></li>

            </ul>

            <ul id="box2"></ul>

        </div>

    </div>

</body>
//JQUERY

<script>

    var timer='';//设置一个定时器

    var $box1=$('#box1').children().clone(true);/*克隆box1的子元素*/

    $('#box2').append($box1);//将复制的元素插入到#box2中

    var $left=parseInt($('.box').css('left'));//获取.box的left值

    var scroll=function(){

        $left-=2;//设置滚动速度为2

        $('.box').css('left',$left+'px');//left赋值

        if($left<-1500){//当box值小于-1500px时，重置.box left值为0；

            $('.box').css('left','0');

            $left=0;

        }

        timer =setTimeout(scroll,30);

    }

    setTimeout(scroll,100);

    $('.wrap').hover(function(){

        clearTimeout(timer);

    },function(){

        setTimeout(scroll,100);

    });

</script>

主要是理解思路，思路理清了，相信你不用看dom都会做了

jquery详解图片平滑滚动的更多相关文章

  1. JQuery插件：ScrollTo平滑滚动到页面指定位置

    1.准备jQuery库和scrollTo.js插件. <script type="text/javascript" src="js/jquery.js"& ...

  2. JQuery实现锚点平滑滚动

    一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用JQuery简单的实现这个效果: 比如,这里我们将通过点击<a> ...

  3. 【转】使用jquery animate创建平滑滚动效果

    这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_to ...

  4. JQuery简单实现锚点链接的平滑滚动

    在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现.   一般使用锚点来跳转到页面指定位置的时候,会生 ...

  5. 【前端】jQuery实现锚点向下平滑滚动特效

    jQuery实现锚点向下平滑滚动特效 实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $( ...

  6. Vue如何引入jquery实现平滑滚动到指定位置效果

    在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...

  7. 使用jquery animate实现锚点慢慢平滑滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js平滑滚动到顶部,底部,指定地方

    [原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...

  9. 页面中的平滑滚动——smooth-scroll.js的使用

    正常的本页面锚链接跳转的时候跟PPT似的,特别生硬,用户体验非常差. 这时候我们就可以借助smooth-scroll.js这个插件,来实现本页面的平滑的跳转. 1首先,导入必须的JS文件 <sc ...

随机推荐

  1. codeforces #364d As Fast As Possible

    题意:一群学生,要到离这里为l的地方去.有一辆车,车只有k个座位.人和车的速度分别v1,v2,问你所有人到达的最小时间. 思路:数学题.最小时间就是要求所有同学同时到达.每个同学最多上一次车.那么显然 ...

  2. mysql单表导入数据,全量备份导入单表

    (1)“导出”表 导出表是在备份的prepare阶段进行的,因此,一旦完全备份完成,就可以在prepare过程中通过--export选项将某表导出了: innobackupex --apply-log ...

  3. 为div添加滚动效果:

    为div添加滚动效果: .xxxx{ width: 100%; height: 100%; overflow: hidden; overflow-y: auto;} 代码片段 <div clas ...

  4. HTTP Status Codes 状态码

    Network Connect Timeout Error

  5. Sublime Text3 运行python（转）

    From:http://blog.csdn.net/hun__ter/article/details/51223031 安装sublime text3后,按Ctrl+b无法运行python文件. 解决 ...

  6. cvm母机宕机重启后数据库修复

    下午正在开周会,然后收到短信,说是X.X.X.X的机器ping不通了,一轮测试过后,发现是某台数据库服务器挂了,先不急着重启,问下tencent客服... 乖乖的好家伙,母机的主板坏了....一个小时 ...

  7. thinkPHP5.0的学习研究【序言】

    2017年6月19日13:19:151.ThinkPHP V5.0——为API开发而设计的高性能框架2.ThinkPHP是一个免费开源的,快速.简单的面向对象的轻量级PHP开发框架,是为了敏捷WEB应 ...

  8. linux c编程：Posix消息队列

    Posix消息队列可以认为是一个消息链表. 有足够写权限的线程可以往队列中放置消息, 有足够读权限的线程可以从队列中取走消息 在某个进程往一个队列写入消息前, 并不需要另外某个进程在该队列上等待消息的 ...

  9. oracle 查询重复数据并且删除, 只保留一条数据重复数据

    最近面试中都遇到了这样一个数据库题: 删除表中的重复数据,有且只保留一条重复数据. 思路: 1)这个题需要用到rowid,首先找到重复数据的rowid,并找出rowid最大或最小值,作为删除的条件: ...

  10. centOS-64位通过YUM源安装nginx

    第一步:在 /etc/yum.repos.d/ 目录下,建立名叫nginx.repo的软件源配置文件.        文件 nginx.repo 的内容是: [nginx] name=nginx re ...