javascript实现多张图片左右无缝滚动效果


Posted in Javascript onMarch 22, 2017

结构:box包含ul,ul包含4个li;ul绝对定位。

复制li-1、li-2到第li-4后面,为了区分于li-1、li-2,内容改为li-5、li-6,颜色不变。此时ul包含6个li。

需要注意的是,移动的是ul这个大盒子而不是li。

原理:当ul 绝对定位的left 值等于(li-1+li-2+li-3+li-4)的宽度时,利用JavaScript快速复原left 值为0 。

此时请注意盒子里面数字和颜色的变化!

效果图:

javascript实现多张图片左右无缝滚动效果

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style media="screen">
  *{
   padding: 0;
   margin: 0;
  }
  ul,li {
   list-style: none;
  }
  img {
   vertical-align: top;
  }
  #box{
   width: 400px;
   height: 100px;
   margin: 100px auto;
   background-color: pink;
   position: relative;
   overflow: hidden;
  }
  #box ul {
   width: 2000px;
   position: absolute;
   left: 0;
   top: 0;
  }
  #box li {
   float: left;
  }
  .aa {
   width: 200px;
   height: 100px;
  }
  .li-1{
   background-color: #f6e659;
  }
  .li-2{
   background-color: #57fa4f;
  }
  .li-3{
   background-color: #3a8ef1;
  }
  .li-4{
   background-color: #c057f1;
  }
 </style>
</head>
<body>
 <div id="box">
  <ul>
   <li class="li-1 aa">li-1</li>
   <li class="li-2 aa">li-2</li>
   <li class="li-3 aa">li-3</li>
   <li class="li-4 aa">li-4</li>
   <li class="li-1 aa">li-5</li>
   <li class="li-2 aa">li-6</li>
  </ul>
 </div>
</body>
</html>
<script type="text/javascript">
 var box = document.getElementById("box");
 var ul = box.children[0];
 var num = 0;
 timer = setInterval(fn,10);
 function fn() {
  num--;
  num <= -800 ? num = 0 : num;
  ul.style.left = num + "px";
 }
</script>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jquery.validate使用攻略 第三部
Jul 01 Javascript
jQuery源码分析-01总体架构分析
Nov 14 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
javascript表单正则应用
Feb 04 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
小程序实现横向滑动日历效果
Oct 21 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 Javascript
tab栏切换原理
Mar 22 #Javascript
js中的DOM模拟购物车功能
Mar 22 #Javascript
js+canvas实现动态吃豆人效果
Mar 22 #Javascript
JavaScript实现星星等级评价功能
Mar 22 #Javascript
discuz表情的JS提取方法分析
Mar 22 #Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 #Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 #Javascript
You might like
第1次亲密接触PHP5(2)
2006/10/09 PHP
一个改进的UBB类
2006/10/09 PHP
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
jquery 分页控件实现代码
2009/11/30 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
Python selenium的基本使用方法分析
2019/12/21 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
python如何设置静态变量
2020/09/07 Python
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
婴儿地球:Baby Earth
2018/12/25 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
机械专业个人求职自荐信格式
2013/09/21 职场文书
护理中职生求职信范文
2014/02/24 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
Django+Celery实现定时任务的示例
2021/06/23 Python
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python