jquery实现图片平滑滚动详解


Posted in jQuery onMarch 22, 2017

本文实例为大家分享了jquery图片平滑滚动效果的具体代码,供大家参考,具体内容如下

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

jquery实现图片平滑滚动详解

原理:

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 相关文章推荐
基于jQuery实现文字打印动态效果
Apr 21 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jquery实现上传图片功能
Jun 29 jQuery
jQuery轻松实现无缝轮播效果
Mar 22 #jQuery
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 #jQuery
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 #jQuery
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 #jQuery
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 #jQuery
You might like
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
jquery 卷帘效果实现代码(不同方向)
2013/02/05 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
jQuery实现页面点击后退弹出提示框的方法
2016/08/24 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
详解Python验证码识别
2016/01/25 Python
Fabric 应用案例
2016/08/28 Python
Python 高级专用类方法的实例详解
2017/09/11 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
Python3 模块、包调用&amp;路径详解
2017/10/25 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
以下的初始化有什么区别
2013/12/16 面试题
实体的生命周期
2013/08/31 面试题
网上卖盒饭创业计划书范文
2014/02/07 职场文书
数控机床专业自荐信
2014/05/19 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书
北京青年观后感
2015/06/15 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
导游词之山西-五老峰
2019/10/07 职场文书
八年级作文之我的母亲
2019/12/10 职场文书