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 ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jQuery实现可以扩展的日历
Dec 01 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 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/11/07 PHP
php顺序查找和二分查找示例
2014/03/27 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
php使用正则验证中文
2016/04/06 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
JavaScript 基本概念
2015/01/20 Javascript
详解JS中遍历语法的比较
2017/04/07 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
python线程池threadpool实现篇
2018/04/27 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
宣传保护环境的公益广告词
2014/03/13 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
运动会加油稿30字
2015/07/21 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
小学语文教学随笔
2015/08/14 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
Jmerte 分布式压测及分布式压测配置
2022/04/30 Java/Android