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插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
Dec 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/03 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
php实现异步数据调用的方法
2015/12/24 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
php中错误处理操作实例分析
2019/08/23 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
PHP7变量处理机制修改
2021/03/09 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
JavaScript 撑出页面文字换行
2009/06/15 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
Jquery cookie插件实现原理代码解析
2020/08/04 jQuery
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
python gdal安装与简单使用
2019/08/01 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
一些Unix笔试题和面试题
2013/01/22 面试题
质量提升方案
2014/06/16 职场文书
语文教研活动总结
2014/07/02 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
同事去世追悼词
2015/06/23 职场文书
运动员代表致辞
2015/07/29 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server