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.014 Longest Common Prefix
14. Longest Common Prefix Total Accepted: 112204 Total Submissions: 385070 Difficulty: Easy Write a ...
- mssql 动态行转列。
)) ,'张三' ,'李四' ,'王五' select * from #a a b ----------- ---- 张三 李四 王五 ( 行受影响) --行转列,步骤:''+张三+],[+王五+], ...
- notepad++ 正则表达式
body { font-family: Bitstream Vera Sans Mono; font-size: 11pt; line-height: 1.5; } html, body { colo ...
- Gradient Boosting Decision Tree学习
Gradient Boosting Decision Tree,即梯度提升树,简称GBDT,也叫GBRT(Gradient Boosting Regression Tree),也称为Multiple ...
- 网络存储技术介绍(2) ( based on zt)
http://www.educity.cn/tx/429084.html 互联网技术DAS.NAS和SAN存储方案的比较 按照设备位置和接入方式,磁盘存储可以分为内置存储和外挂存储,外挂存储又分为直连 ...
- Java遍历JSON
JSONObject jsonObject = new JSONObject(s);然后用Iterator迭代器遍历取值,建议用反射机制解析到封装好的对象中 JSONObject jsonObject ...
- 你还没成为Delphi QC的成员吗？（转红鱼儿）
Delphi很早就建立了quality.embarcadero.com,简称为QC,质量控制中心,用来接收用户反馈的bug,新功能建议等,是开发者与delphi官方直接交流的平台.无论是否为正版用户, ...
- Oracle优化查询技巧
1. WHERE子句中的连接顺序:Oracle采用自下而上的顺序解析WHERE子句,根据这个原理,表之间的连接必须写在其他WHERE条件之前, 那些可以过滤掉最大数量记录的条件必须写在WHERE子句的 ...
- 如何用expdp、impdp按表空间导出、导入？
参考:http://blog.csdn.net/zftang/article/details/6387325 A数据库: 表空间:ylcois 用户名:ylcois 密码:ylcois B数据库: 表 ...
- signtool.exe not found
When check the [sign the Xap File] checkbox, build project failed due to signtool.exe not found. Fol ...