jquery详解图片平滑滚动

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

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

代码部分：

  1. //CSS
  2. *{margin: 0;padding: 0}
  3. ul{list-style: none}
  4. .box ul li{display: block;float: left;width: 300px;height: 300px;margin-right: -1px;background-size: cover;background-position: center center;}
  5. .box{height: 300px;width:3010px;}
  6. #box1,#box2{float: left}
  7. .wrap{position: relative;width: 800px;margin: auto;height: 300px;overflow: hidden}
  8. .box{position: absolute;left: 0;}
  1. //HTML
  2. <body>
  3.     <div class="wrap">
  4.         <div class="box">
  5.             <ul id="box1">
  6.                 <li style="background:url(images/1.jpg) no-repeat"></li>
  7.                 <li style="background:url(images/2.jpg) no-repeat"></li>
  8.                 <li style="background:url(images/3.jpg) no-repeat"></li>
  9.                 <li style="background:url(images/4.jpg) no-repeat"></li>
  10.                 <li style="background:url(images/5.jpg) no-repeat"></li>
  11.             </ul>
  12.             <ul id="box2"></ul>
  13.         </div>
  14.     </div>
  15. </body>
  1. //JQUERY
  2. <script>
  3.     var timer='';//设置一个定时器
  4.     var $box1=$('#box1').children().clone(true);/*克隆box1的子元素*/
  5.     $('#box2').append($box1);//将复制的元素插入到#box2中
  6.     var $left=parseInt($('.box').css('left'));//获取.box的left值
  7.     var scroll=function(){
  8.         $left-=2;//设置滚动速度为2
  9.         $('.box').css('left',$left+'px');//left赋值
  10.         if($left<-1500){//当box值小于-1500px时，重置.box left值为0；
  11.             $('.box').css('left','0');
  12.             $left=0;
  13.         }
  14.         timer =setTimeout(scroll,30);
  15.     }
  16.     setTimeout(scroll,100);
  17.     $('.wrap').hover(function(){
  18.         clearTimeout(timer);
  19.     },function(){
  20.         setTimeout(scroll,100);
  21.     });
  22. </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. k8s集群部署

    环境: 两台虚拟机, 10.10.20.203 部署docker.etcd.flannel.kube-apiserver.kube-controller-manager.kube-scheduler ...

  2. Web性能测试工具：http_load安装&使用简介

    除了siege,在Web性能测试工具中,http_load也是比较热门和常见的一款,有时因为种种原因,只能使用现成的工具,所以多了解和掌握一种Web性能测试工具是很有必要的. 1.下载安装包 略过 2 ...

  3. 第二篇： Ansible 安装

    一.配置epel源 wget –O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-6.repo 二.安装ansible  ...

  4. 【JMeter4.0学习（二）】之搭建openLDAP在windows8.1上的安装配置以及JMeter对LDAP服务器的性能测试脚本开发

    目录: 概述 安装测试环境 安装过程 配置启动 配置搭建OpenLDAP 给数据库添加数据 测试查询刚刚插入的数据 客户端介绍 JMeter建立一个扩展LDAP服务器的性能测试脚本开发 附:LDAP学 ...

  5. PHP-Socket-阻塞与非阻塞，同步与异步概念的理解

    1. 概念理解 在进行网络编程时,我们常常见到同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调用方式:同步:      所谓同步,就是在发出一个功能调用时,在没 ...

  6. JUNIT单元测试时统计代码的覆盖率工具eclemma安装

    EclEmma是Eclipse里的一个插件,安装简单,覆盖率显示直观.安装EclEmma.打开Eclipse,点击Help → Software Updates → Find and Install, ...

  7. hdu1695(容斥 or 莫比乌斯反演)

    刚开始看题,想了一会想到了一种容斥的做法.复杂度O( n(3/2) )但是因为题目上说有3000组测试数据,然后吓尿.完全不敢写. 然后想别的方法. 唉,最近精神有点问题,昨天从打完bc开始想到1点多 ...

  8. RMQ with Shifts(线段树)

    RMQ with Shifts Time Limit:1000MS     Memory Limit:65535KB     64bit IO Format:%I64d & %I64u Pra ...

  9. Xshell调节字体大小和样式

    有时候没有看着字体太小的,好难受, 调节字体大小: ALT+P快捷键打开

  10. 函数的光滑化或正则化 卷积 应用 两个统计独立变量X与Y的和的概率密度函数是X与Y的概率密度函数的卷积

    http://graphics.stanford.edu/courses/cs178/applets/convolution.html Convolution is an operation on t ...