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"> ...
随机推荐
- logstash 因为jdk版本不对造成索引时间戳失败
版本 logstash 1.5.0 RC2 JDK 1.7.15 Logstash推荐使用JDK 1.7.75 每次启动都是会有部分的数据无法替换日志中的时间戳,导致日志时间戳被认定为当前读取时间. ...
- Linux nfs配置
***************节点2的arch2目录挂载到节点1下.那么节点2是主节点1是备******** 10.230.39.234(节点1)cat /etc/exports /arch2 10. ...
- 升级正版win10及保持yosemite双操
因为有同事升级了正版的win10,心头长草了,本来x230的win7就是正版,现在win10可以免费升级,为何不做? 为此跑了2趟lenovo的维修站,诸多限制,最终决定自己搞定.据说,需要恢复到原厂 ...
- C++ 删除字符串的两种实现方式
C++实现删除给定字符串的给定字符串思路主要有这么几种实现方式: 1.KMP算法2.用STL的string的 find,然后用erase3.用C的strstr找到字串位置,然后用strncpy写到新串 ...
- zedboard如何从PL端控制DDR读写(六)
上一节说到了DDR寻址的问题,如下图: 从官方文档上我们看到了DDR的地址是从0008_0000开始的,那么我们开始修改Xilinx给我们提供的IP核代码.其实很简单,上一节已经分析了地址停留在000 ...
- objective c, category 和 protocol 中添加property
property的本质是实例变量 + getter 和 setter 方法 category和protocol可以添加方法 category 和 protocol中可以添加@property 关键字 ...
- 并查集（HDOJ 1856）
并查集 英文:Disjoint Set,即“不相交集合” 将编号分别为1…N的N个对象划分为不相交集合, 在每个集合中,选择其中某个元素代表所在集合. 常见两种操作: n 合并两个集合 ...
- 前端Html+Css——豆蔻年华（自学一个月）
详细见千万别碰我--燕十三 html .htm .shtml三者区别是什么 1..htm与.html没有本质上的区别,表示的是同一种文件,只是适用于不同的环境之下. 2.DOS仅能识别8+3的文件名, ...
- {Reship}Precision, Accuracy & Recall
============================================================== This aritcle came from here ========= ...
- web初学之jdbc连接数据库
一直没有找到bug,初次接触jdbc找问题也是比较生疏.. 抛出异常: 出错点是没有在build path下导入mysql驱动jar包,发现问题,导入,成功解决问题.