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. storm RollingTopWords 实时top-N计算任务窗口设计

    转发请注明原创地址 http://www.cnblogs.com/dongxiao-yang/p/6381037.html 流式计算中我们经常会遇到需要将数据根据时间窗口进行批量统计的场景,窗口性质一 ...

  2. （一）spark算子 分为3大类

    value类型的算子 处理数据类型为value型的算子(也就是这个算子只处理数据类型为value的数据),可以根据rdd的输入分区与输出分区的关系分为以下几个类型 (1)输入分区与输出分区一对一型 m ...

  3. linux网络及防火墙配置命令

      /etc/sysconfig/network 包括主机基本网络信息,用于系统启动 /etc/sysconfig/network-script/ 此目录下是系统启动最初始化网络的信息 /etc/sy ...

  4. Redis学习笔记-Redis内部数据结构

    Redis内部数据结构 Redis和其他key-value数据库的很大区别是它支持非字符串类型的value值.它支持的value值的类型如下: sds (simple dynamic string) ...

  5. 多媒体开发之--- h264 图像、帧、片、NALU

    图像.帧.片.NALU 是学习 H.264的人常常感到困惑的一些概念,我在这里对自己的理解做一些阐述,欢迎大家讨论: H.264 是一次概念的革新,它打破常规,完全没有 I 帧.P帧.B 帧的概念,也 ...

  6. Live555 中的客户端动态库.so的调用方式之一 程序中调用

    1.  打开动态链接库:    #include <dlfcn.h>    void *dlopen(const char *filename, int flag);    该函数返回操作 ...

  7. 关于reset.css的那些事

    分析过程:body: 发现在没有填写任何内容的情况下是没有margin 的  只有在加入了文字或者div中以后才有了margin(废话)那么 我想问一下 body的padding 默认的有吗??在哪里 ...

  8. 探究css中各种情况下的元素的垂直和水平居中的问题(面试题)

    今天各种纠结,真的是不想写东西(ps 我比较懒)但是老是有人问这个问题,于是我就本着分享精神还是整理一下,好了废话不多说 开始上代码 问题:外边是一个容器,容器中还有一个容器,那么请问怎么让里边的容器 ...

  9. centos7.0 tomcat9.0 ip访问 manager

    版本:Tomcat 9.0 问题:新安装的tomcat,用其他机器访问tomcat的Server Status.Manager App.Host Manager三个页面均显示403(本机访问没有问题) ...

  10. Python菜鸟之路：Python操作MySQL-即pymysql/SQLAlchemy用法

    上节介绍了Python对于RabbitMQ的一些操作,本节介绍Python对于MySQL的一些操作用法 模块1:pymysql(等同于MySQLdb) 说明:pymysql与MySQLdb模块的使用基 ...