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. 一个可以模拟GET，POST，PUT，DELET请求的HTTP在线工具

    一个简陋的HTTP请求工具,UI比较丑陋.0.0,可以用于接口调试. 之前在调试公司的远程接口的时候用的是curl,后来也在网上找到几种Http请求模拟的客户端程序.当时后来发现google app ...

  2. 在Ubuntu 16.04下安装 virtualbox 5.2

        sudo sh -c 'echo "deb http://download.virtualbox.org/virtualbox/debian xenial contrib" ...

  3. codeforces 427 div.2 F. Roads in the Kingdom

    F. Roads in the Kingdom time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  4. 功能强大的图片截取修剪神器：Android SimpleCropView及其实例代码重用简析（转）

    功能强大的图片截取修剪神器:Android SimpleCropView及其实例代码重用简析 SimpleCropView是github上第一个第三方开源的图片修剪截取利器,功能强大,设计良好.我个人 ...

  5. 如何简单的实现一个tab页title的动画效果

    首先我们来看看实现的效果 tab上的title沉下去的效果 先来看看布局 <?xml version="1.0" encoding="utf-8"?> ...

  6. android的DrawerLayout用法

    DrawerLayout的关键点(我认为的)就在于layout文件的layout_gravity属性的值,只有左右,两种选择,不能从上下滑出来,就算有这个效果也不是这个套路弄出来的. <?xml ...

  7. git入门三(远程、标签)

    git 入门三 (远程.标签)     分布式版本控制管理系统本地仓库和中心服务器仓库数据是本地的镜像仓库,中心服务器数据仓库的是为了多用户数据合并和获取同步的中心,多人协作需要管理这些远程仓库,以便 ...

  8. Effective C++ 49，50

    49.熟悉标准库. C++标准库非常大. 首先标准库中函数非常多,为了避免名字冲突.使用命名空间std.而之前的库函数都存放于< .h>中,如今成为伪标准库.而不能直接将这些头文件所有直接 ...

  9. ztreeSearch

    $.fn.extend({ ztreeSearch : function(options) { // var _self=$(this); var defaults = { id : '', sear ...

  10. 文件大小转换（b,kb,M,GB/TB）

    //转换单位 setupSize(1111111111111); function setupSize($fileSize) { $size = sprintf("%u", $fi ...