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 相关文章推荐
jQuery 前的按键判断代码
Mar 19 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 Javascript
前台js改变Session的值(用ajax实现)
Dec 28 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
javascript实现获取服务器时间
May 19 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
package.json文件配置详解
Jun 15 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
Vue学习之常用指令实例详解
Jan 06 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
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
PHP之短标签开启设置
2013/06/17 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
CodeIgniter配置之autoload.php自动加载用法分析
2016/01/20 PHP
php session_decode函数用法讲解
2019/05/26 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
bootstrap table小案例
2016/10/21 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
Python 的 Socket 编程
2015/03/24 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
python 获取等间隔的数组实例
2019/07/04 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
毕业生找工作推荐信
2013/11/21 职场文书
优秀食品类广告词
2014/03/19 职场文书
校运会口号
2014/06/18 职场文书
团日活动总结报告
2014/06/25 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书