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"> ...
随机推荐
- 2. xargs 命令
1.简介 xargs是给命令传递参数的一个过滤器,也是组合多个命令的一个工具.它把一个数据流分割为一些足够小的块,以方便过滤器和命令进行处理.通常情况下,xargs从管道或者stdin中读取数据,但是 ...
- Python绑定方法，未绑定方法，类方法，实例方法，静态方法
>>> class foo(): clssvar=[1,2] def __init__(self): self.instance=[1,2,3] def hehe(self): pr ...
- Karma 4 - Karma 集成 Webpack 进行单元测试
可以将 karma 与 webpack 结合起来,自动化整个单元测试过程. 配置环境 1. 首先根据 1 完成基本的 karma 测试环境. 2. 安装 webpack 和 webpack 使用的 l ...
- Fragment一些问题
1.使用fragment静态加载,当需要替换的时候使用replace方式是无效的....... 2.replace的容器如果是线性布局,那么将会出现之前的页面残留的情况,正确做法是使用FrameLay ...
- 纸上谈兵：AVL树
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 二叉搜索树的深度与搜索效率 我们在树, 二叉树, 二叉搜索树中提到,一个有n个节点 ...
- 浅谈js的键值对key和value
> 昨晚无意中看到类似下面结构的一段代码的取值问题,引起我的兴趣,花了点时间写了个demo给大家分享一下... var obj = [ {"2011":{"name ...
- 【原创】No matching distribution found for Twisted>=10.0.0 (from scrapy)
系统 Ubuntu14.04 python 2.7.11 运行 pip install scrapy 报错: No matching distribution found for Twiste ...
- KBMMW 4.90.00 发布
kbmMW is a portable, highly scalable, high end application server andenterprise architecture integra ...
- 由tombstone文件解析jni代码过程
Android开发测试会经常遇到crash. (1)adb shell (2)cd /data/tombstones/ (3)adb pull /data/tombstones/tombston_00 ...
- Hibernate对象的状态
站在持久化的角度, Hibernate 把对象分为 4 种状态: 1. 持久化状态 2. 临时状态 3. 游离状态 4. 删除状态 Session 的特定方法能使对象从一个状态转换到另一个状态. 下面 ...