JS无缝滚动
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; min-height: 36.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #d74200 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #289c97 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #060606 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4a8a01 }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #929151; min-height: 36.0px }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #929151 }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #ad42ef }
p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4f5d66 }
p.p12 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #a5b2b9 }
p.p13 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #e48b00 }
p.p14 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4663cc }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #48565d }
span.s4 { color: #289c97 }
span.s5 { color: #d74200 }
span.s6 { color: #929151 }
span.s7 { color: #060606 }
span.s8 { color: #ad42ef }
span.s9 { color: #d16400 }
span.s10 { color: #698906 }
span.s11 { color: #4a8a01 }
span.s12 { color: #000000 }
span.s13 { color: #4663cc }
span.s14 { color: #a5b2b9 }
span.s15 { color: #e48b00 }
span.Apple-tab-span { white-space: pre }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul,
li {
margin: 0;
padding: 0;
list-style-type: none;
}
img {
height: 300px;
width: 300px;
}
ul {
position: absolute;
left: 0;
top: 0;
}
li {
float: left;
}
#div1 {
height: 300px;
width: 1200px;
background-color: red;
margin: 100px auto;
position: relative;
overflow: hidden;
}
input{
border: 1px solid #8A2BE2;
height: 100px;
width: 200px;
font-size: 20px;
color: white;
background-color: #FFB6C1;
margin-left: 100px;
}
</style>
</head>
<body>
<div id="div1">
<ul>
<li><img src="img/014.jpg" /></li>
<li><img src="img/017.jpg" /></li>
<li><img src="img/018.jpg" /></li>
<li><img src="img/019.jpg" /></li>
</ul>
</div>
<input type="button" value="向左滚动" />
<input type="button" value="向右滚动" />
</body>
<script type="text/javascript">
// 实现无缝滚动，鼠标移入停止滚动，移出继续滚动，以及可以调节滚动方向效果
var oDiv = document.getElementById("div1");
var ul = document.getElementsByTagName("ul")[0];
var liS = document.getElementsByTagName("li");
var timer = null;
var speed = 4;
ul.innerHTML = ul.innerHTML + ul.innerHTML;
ul.style.width = liS[0].offsetWidth * liS.length + "px";
timer = setInterval(move, 30);
oDiv.onmouseover = function() {//实现鼠标移入暂停
clearInterval(timer);
}
oDiv.onmouseout = function() {//鼠标移出继续滚动
timer = setInterval(move, 30);
}
move();//每次执行move()的时候都会延迟30ms，//
/在第一次的实际效果上有瑕疵，在外面调用一次move()
function move() {
if(-ul.offsetLeft > ul.offsetWidth / 2) {//左滚无缝
ul.style.left = 0 + "px";
}
if(ul.offsetLeft > 0) {//右滚无缝
ul.style.left = -ul.offsetWidth / 2 + "px";
}
ul.style.left = ul.offsetLeft + speed + "px";
}
//实现通过按钮改变运动方向的功能
var inputs = document.getElementsByTagName("input");
inputs[0].onclick = function() {
speed = -4;
}
inputs[1].onclick = function() {
speed = 4;
}
</script>
</html>
JS无缝滚动的更多相关文章
- 手写JS无缝滚动插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- js无缝滚动原理及详解[转自刹那芳华]
刚刚接触JS,网上找了一些关于无缝滚动的教程,但都大同小异,对我这种新手来说也只是会用,不知道什么意思,想要自己写个更是一头雾水.于是找了一些资料,详细说明一下JS无缝滚动的原理,相信看过这篇文章之后 ...
- js 无缝滚动效果学习
<!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...
- js无缝滚动跑马灯
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [Js]无缝滚动
效果: 1.默认缓慢往左滚动 2.放到左箭头上还是向左滚动,放到右箭头上向右滚动 3.放到图片上停止滚动,移出继续滚动 思路: 1.计算图片列表ul的宽度 2.开启定时器,使其向左边距不断增大,造成向 ...
- JS——无缝滚动
1.描述——无缝滚动图片 2.代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- js无缝滚动，不平滑（求高人指点）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- 纯js无缝滚动
HTML代码 <!--父容器要使用overflow: hidden;--> <div id="imgsList" style="height:150px ...
- scrollLeft的相关问题（js横向无缝滚动）
<div id="demo"> <div id="innerdemo"> <div id="demo1"> ...
随机推荐
- No.1__C#
这是第一篇C#的日记,到现在为止已经学习了一个礼拜的C#了.由于是实习中才开始学习,所以这次不准备像在大学学习那样,拿着课本划重点,背概念.这应当是一门实践的课程,应该一边编程,一边学.这是到公司第一 ...
- Symfony2 资料篇
http://www.chrisyue.com/symfony2-in-action-day-1.html 由于Symfony2现在还没有很完善的中文文档,所以不想看文档的同学可以直接进行点击上面的链 ...
- [转]遍历windows服务
原文:http://www.codeproject.com/Articles/1573/About-Windows-Services #include <windows.h> #inclu ...
- Visual Studio 中可执行文件中嵌入的清单文件
概要 本分步指南介绍如何在 Microsoft Visual Studio 2005年中的可执行文件 (.exe) 文件中嵌入的清单文件.如果您要开发"认证 Windows Vista&qu ...
- 一个最小化的SpringBoot项目
项目结构 项目基于Maven管理,注意使用了父pom <parent> <groupId>org.springframework.boot</groupId> &l ...
- git 代码组织
在20145306CSAPP2E文件夹下建立相应的文件夹: src:存放源代码文件 include: 存放头文件 bin:存放编译后的目标文件.可执行文件等 lib:存放项目所需的静态库.动态(共享) ...
- ant安装（linux）
1.下载 下载地址:http://ant.apache.org/bindownload.cgi 下载apache-ant-1.9.7-bin.tar.gz(当前最新版本),将该下载包拷贝到/data/ ...
- submit异步提交 回调的方法
背景: mvc模式下,当submit表单的时候,后台Control自动绑定Model类,但是如果不用submit来提交,改用ajax提交的时候,后台Control无法获取前台form表单内相应Name ...
- 转：RealThinClient LinkedObjects Demo解析
这个Demo源码实现比较怪,有点拗脑,原因估是作者想把控件的使用做得简单,而封装太多. 这里说是解析,其实是粗析,俺没有耐心每个实现点都查实清楚,看源码一般也就连读带猜的. 这个Demo表达出的意义, ...
- 学习打造自己的DEBUG_NEW
学习范例http://www.cppblog.com/Robertxiao/archive/2012/11/05/194547.html 在使用MFC库开发程序时,我非常喜欢MFC框架中的内存泄漏诊断 ...