js实现无缝循环滚动
更新时间：2020年06月23日 17:30:00 作者：Mr.小Y
这篇文章主要为大家详细介绍了js实现无缝循环滚动的具体代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章
本文主要介绍了js实现三级联动效果的示例代码，简单易懂。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了javascript无刷新评论实现方法,涉及javascript动态添加表格元素的技巧,需要的朋友可以参考下2015-05-05
这里之所以使用setTimeout()，因为可以彻底回收当前所有对象，防止变量之间的引用导致释放失败，可以当作一个保障措施，按照道理来说，这里不会执行了。2010-04-04
整理Javascript事件响应学习笔记，之前一系列的文章是跟我学习Javascript，本文就是进一步学习javascript流程控制语句，希望大家继续关注2015-12-12
这篇文章主要介绍了详解使用Next.js构建服务端渲染应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
微信小程序拍卖商品详情页设计与交互实现代码(含倒计时、实时更新出价)
这篇文章主要介绍了微信小程序拍卖商品详情页设计与交互实现代码(含倒计时、实时更新出价),本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了JS表格的动态操作,结合完整实例形式详细分析了JavaScript针对表格元素的动态修改与删除简单操作技巧,需要的朋友可以参考下2020-01-01
这篇文章主要介绍了微信小程序module.exports模块化操作,结合实例形式简单分析了module.exports模块化的定义与引用相关操作技巧与注意事项,需要的朋友可以参考下2018-12-12
以下是从网上找到的一段JavaScript实现图形报表的代码，对于想客户端显示报表的朋友可以参考下。2009-12-12
javascript完整操作Table的增加行，删除行的列子大全
非常漂亮的js操作table行代码函数。比较方便2008-10-10
最新评论