这篇文章主要为大家详细介绍了 js 实现无缝循环滚动的具体代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
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>
来源: http://www.phperz.com/article/17/0516/332388.html