js实现无缝循环滚动


Posted in Javascript onJune 23, 2020

本文实例为大家分享了js无缝循环滚动实现代码,供大家参考,具体内容如下

1、图片格式:260*400.
2、使用循环定时器轻松实现

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>无缝滚动</title>
</head>
<style type="text/css">
 .row{
 width: 1298px;
 height: 400px;
 border: 1px solid;
 box-shadow:2px 2px 2px #000;
 overflow: hidden;
 }
 .box{
 position: relative;
 }
 .box1,.box2{
 width: 1298px;
 position: absolute;
 }
 .box2{
 left:1298px;
 }
 img{
 float: left;
 }
</style>
<body>
 <div class="row">
 <div class="box" id="box">
  <div class="box1" id="box1">
  <img src="images/1.jpg">
  <img src="images/2.jpg">
  <img src="images/3.jpg">
  <img src="images/4.jpg">
  <img src="images/5.jpg">
  </div>
  <div class="box2" id="box2">
  <img src="images/1.jpg">
  <img src="images/2.jpg">
  <img src="images/3.jpg">
  <img src="images/4.jpg">
  <img src="images/5.jpg">
  </div>
 </div>
 </div>
</body>
<script type="text/javascript">
 window.onload = function(){
 var _box1 = document.getElementById("box1");
 var _box2 = document.getElementById("box2");
 var x = 0;
 var fun = function(){
  _box1.style.left = x + 'px';
  _box2.style.left = (x +1298) + 'px';
  x--;
  if((x +1298) == 0){
  x = 0;
  }
 }
 setInterval(fun,1);
 }
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
Javascript中的delete介绍
Sep 02 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
Vue 实现树形视图数据功能
May 07 Javascript
jquery实现网页定位导航
Aug 23 #Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 #Javascript
Javascript将JSON日期格式化
Aug 23 #Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 #Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 #Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 #Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 #Javascript
You might like
极典R601SW收音机
2021/03/02 无线电
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
webpack优化的深入理解
2018/12/10 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
Python实现发送email的几种常用方法
2014/08/18 Python
如何用python整理附件
2018/05/13 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
python实现低通滤波器代码
2020/02/26 Python
初探CSS3中的calc()功能
2015/07/14 HTML / CSS
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
保荐人的岗位职责
2013/11/19 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
大学生实习推荐信
2015/03/27 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
网络销售员岗位职责
2015/04/11 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
晚会开幕词范文
2016/03/04 职场文书
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android