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. Junit 内部解密之一： Test + TestCase + TestSuite

    转自:http://blog.sina.com.cn/s/blog_6cf812be0100wbhq.html nterface: Test 整个测试的的基础接口 Method 1: abstract ...

  2. /var/log目录下的Linux日志文件功能详解_转

    摘自:http://www.niaoyun.com/help/application/386.html 学习linux应该知道日志文件的所在位置以及它们包含的内容,在系统运行正常的情况下学习了解这些不 ...

  3. bg、fg、nohup

    1.bg 执行如下命令: tail -f log.txt 此时程序是在前台运行的,将程序放到后台执行,按ctrl+z,执行结果如下: []+ Stopped tail -f log.txt 执行bg命 ...

  4. 蒙特卡洛方法计算圆周率的三种实现-MPI openmp pthread

    蒙特卡洛方法实现计算圆周率的方法比较简单,其思想是假设我们向一个正方形的标靶上随机投掷飞镖,靶心在正中央,标靶的长和宽都是2 英尺.同时假设有一个圆与标靶内切.圆的半径是1英尺,面积是π平方英尺.如果 ...

  5. 【Selenium + Python】之 Excel、CSV、XML文件读取数据并运用数据百度查询

    目录 从Excel读取数据进行百度搜索 从CSV读取数据进行百度搜索 从XML读取数据进行登录操作 附:其他学习资料(<xml.etree.ElementTree模块>.<pytho ...

  6. left join,right join用法简介

    方法一(推荐): select a.man_id,man_name,d.sex_name,zw_name,c.money from man as a left join zw as b on a.zw ...

  7. <Netty>（入门篇）TIP黏包/拆包问题原因及换行的初步解决之道

    熟悉TCP编程的读者可能都知道,无论是服务端还是客户端,当我们读取或者发送消息的时候,都需要考虑TCP底层的粘包/拆包机制.木章开始我们先简单介绍TCP粘包/拆包的基础知识,然后模拟一个没有考虑TCP ...

  8. Hugo hexo 搭建博客系列1：自己的服务器

    hexo jekyll https://hexo.io/zh-cn/ http://theme-next.iissnan.com/getting-started.html Hexo 是高效的静态站点生 ...

  9. git add -A使用说明

    git help add -A, --all            Like -u, but match <filepattern> against files in the workin ...

  10. POJ1942

    Paths on a Grid Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 24236   Accepted: 6006 ...