js实现无缝循环滚动
<!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="data:images/1.jpg">
<img src="data:images/2.jpg">
<img src="data:images/3.jpg">
<img src="data:images/4.jpg">
<img src="data:images/5.jpg">
</div>
<div class="box2" id="box2">
<img src="data:images/1.jpg">
<img src="data:images/2.jpg">
<img src="data:images/3.jpg">
<img src="data:images/4.jpg">
<img src="data: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>
图片格式：260*400.
使用循环定时器轻松实现。
js实现无缝循环滚动的更多相关文章
- Expression Blend4经验分享：文字公告无缝循环滚动效果
这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...
- JavaScript学习笔记——简单无缝循环滚动展示图片的实现
今天做了一个简单的无缝循环滚动的实例,这种实例在网页中其实还挺常见的,下面分享一下我的学习收获. 首先,无缝滚动的第一个重点就是——动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScri ...
- js 图片无缝循环
<html> <head> <title>Js图片无缝滚动</title> <style type="text/css"> ...
- Swift - 多层无缝循环滚动背景（SpriteKit游戏开发）
在游戏开发中,比如跑酷游戏.我们需要实现背景的无限循环滚动,来营造运动的效果.除了单层的背景滚动,还有视差滚动. 视差滚动是指让多层背景以不同的速度移动,形成立体的效果,从而带来非常出色的视觉体验. ...
- JS实例——间歇循环滚动
间歇滚动:滚动一行后,延迟2秒后继续滚动 具体实现代码如下: <!doctype html> <html lang="en"> <head> & ...
- table表格数据无缝循环滚动
分享一个好看的表格无缝滚动:(实战用起来很舒服) 直接copy代码到你的程序中: 1.HTML <div class="tablebox"> ...
- cocos2d JS 设置字幕循环滚动(背景图滚动亦可)
var dong = ccs.load("res/Login.json"); this.addChild(dong.node); this.cShamNotice = ccui.h ...
- DIV+javascript实现首尾相连循环滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js图片无缝滚动代码
想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...
随机推荐
- 【一起学OpenFoam】01 OpenFoam的优势
CFD技术发展到今天,已经超过了大半个世纪了,已经涌现出非常多的CFD软件可供人们使用.通用商业CFD软件譬如Fluent.CFX.Star CCM+等在工业上得到了广泛的应用,另外一些专用的软件(如 ...
- AutoMapper(五)
返回总目录 Dynamic和ExpandoObject映射 AutoMapper不用任何配置就可以从dynamic(动态)对象映射或映射到dynamic对象. namespace FifthAutoM ...
- hadoop 笔记（zookeeper）
1.安装 需要提前安装java环境,本文下载zookeeper-3.3.6.tar.gz包. 1.1 tar -zxvf zookeeper-3.3.6.tar.gz 1.2 修改conf中的zoo_ ...
- webpack搭建前端一条龙服务
作为从grunt.gulp一路走来的老码农,一开始用webpack的时候我是很抗拒的.但由于核心库使用了vue,而webpack又是vue的最佳拍档(vue作者专门为其写了vue-loader),所以 ...
- MapReduce剖析笔记之六：TaskTracker初始化任务并启动JVM过程
在上面一节我们分析了JobTracker调用JobQueueTaskScheduler进行任务分配,JobQueueTaskScheduler又调用JobInProgress按照一定顺序查找任务的流程 ...
- ASP.NET MVC Model元数据(三)
ASP.NET MVC Model元数据(三) 前言 在上篇中我们大概的讲解了Model元数据的生成过程,并没有对Model元数据本身和详细的生成过程有所描述,本篇将会对详细的生成过程进行讲解,并且会 ...
- java类的加载机制
什么是类装载器ClassLoader ClassLoader是一个抽象类 ClassLoader的实例将读入Java字节码将类装载到JVM中 ClassLoader可以定制,满足不同的字节码流获取方式 ...
- select,epoll,poll比较
介绍和比较 http://www.cnblogs.com/maociping/p/5132583.html 比较 http://www.dataguru.cn/thread-336032-1-1.ht ...
- 【.net 深呼吸】自定义特性（Attribute）的实现与检索方法
在.net的各个语言中,尤其是VB.NET和C#,都有特性这一东东,具体的概念,大家可以网上查,这里老周说一个非标准的概念——特性者,就是对象的附加数据.对象自然可以是类型.类型成员,以及程序集. 说 ...
- 计算机程序的思维逻辑 (43) - 剖析TreeMap
40节介绍了HashMap,我们提到,HashMap有一个重要局限,键值对之间没有特定的顺序,我们还提到,Map接口有另一个重要的实现类TreeMap,在TreeMap中,键值对之间按键有序,Tree ...