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. lua学习笔记（七）

    错误处理   assert(exp)   error("error message text")   pcall安全调用 协同程序   lua没有真正的多线程,都是使用协同程序也实 ...

  2. 详细的obs操作教程(windows/mac)图解

    直播推流软件obs操作配置教程包含支持mac和windows配置 1 2 3 4 5 6 7 8 9

  3. saltstack内置state模块file之append

    添加文件文本在文件尾部 salt.states.file.append(name, text=None, makedirs=False, source=None, source_hash=None, ...

  4. ubuntu下搭建的lamp环境新建站点

    这几天刚装了一个ubuntu 16.04桌面版,总之来来回回几遍才基本把环境搭建好,本来用apt-get搭建,结果不知道什么原因16.04版不支持装php5 ,提示源放弃了php5版本,不得不使用ph ...

  5. php_screw加密安装

    php_screw的安装与使用 1.下载:http://sourceforge.net/projects/php-screw/files/ php文件通常以文本格式存贮在服务器端, 很容易被别人读到源 ...

  6. C语言基础知识【简介】

    C 简介1.关于 CC 语言是为了编写 UNIX 操作系统而被发明的.C 语言是以 B 语言为基础的,B 语言大概是在 1970 年被引进的.C 语言标准是于 1988 年由美国国家标准协会(ANSI ...

  7. C++ 错误积累

    错误一 VS2012错误:不能在成员函数  的类外部重新声明该函数 解决:检查函数的大括号匹配

  8. Bag of mice(概率DP)

    Bag of mice  CodeForces - 148D The dragon and the princess are arguing about what to do on the New Y ...

  9. NSTheard 详解

    一.什么是NSThread NSThread是基于线程使用,轻量级的多线程编程方法(相对GCD和NSOperation),一个NSThread对象代表一个线程, 需要手动管理线程的生命周期,处理线程同 ...

  10. What is the difference between iterations and epochs in Convolution neural networks?

    https://stats.stackexchange.com/questions/164876/tradeoff-batch-size-vs-number-of-iterations-to-trai ...