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 04 jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 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实现Ftp用户的在线管理的代码
2007/03/06 PHP
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
python 实现堆排序算法代码
2012/06/05 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
使用IPython或Spyder将省略号表示的内容完整输出
2020/04/20 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
python3排序的实例方法
2020/10/20 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
房屋租赁委托书范本
2014/10/04 职场文书
单位租房协议书范本
2014/12/04 职场文书
北京天坛导游词
2015/02/12 职场文书
求职自我评价怎么写
2015/03/09 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
2016寒假假期总结
2015/10/10 职场文书
趣味运动会标语口号
2015/12/26 职场文书