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异步提交表单实例
May 30 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 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生成静态HTML速度快类库
2007/03/18 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
PHP容易忘记的知识点分享
2013/04/30 PHP
解析php入库和出库
2013/06/25 PHP
PHP进程同步代码实例
2015/02/12 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
理解Javascript_03_javascript全局观
2010/10/11 Javascript
jQuery .tmpl(), .template()学习资料小结
2011/07/18 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
2015/02/27 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
python标准算法实现数组全排列的方法
2015/03/17 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
python是怎么被发明的
2020/06/15 Python
Python实现疫情地图可视化
2021/02/05 Python
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
酒店保安员岗位职责
2014/01/31 职场文书
学生会部长竞聘书
2014/03/31 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
开学第一周值周总结
2015/07/16 职场文书
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫