JS——无缝滚动
1、描述——无缝滚动图片
2、代码
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding: 0;}
.box{
width:600px;
height:200px;
border:1px solid gray;
margin: 30px auto;
position: relative;
overflow: hidden;
}
.box ul{
list-style: none;
width:300%;
position:absolute;
top:0;
left:0;
}
.box ul li{
float:left;
}
.box ul li img{
/*不写这句话的话,会有一个下边距*/
vertical-align: top;
cursor:pointer;
}
</style>
</head> <body>
<div class="box">
<ul>
<li><img src="img/01.jpg" alt="" /></li>
<li><img src="img/02.jpg" alt="" /></li>
<li><img src="img/03.jpg" alt="" /></li>
<li><img src="img/04.jpg" alt="" /></li>
<li><img src="img/01.jpg" alt="" /></li>
<li><img src="img/02.jpg" alt="" /></li>
</ul>
</div>
</body> </html>
<script type="text/javascript">
var ul=document.getElementsByTagName("ul")[0];
var left=0;
var timer=null;
timer=setInterval(autoPlay,5);
function autoPlay(){
left--;
if(left>-1200){ }else{
left=0;
}
ul.style.left=left+"px";
}
ul.parentNode.onmousemove=function(){
clearInterval(timer);
}
ul.parentNode.onmouseout=function(){
timer=setInterval(autoPlay,5);
}
</script>
3、效果
无缝滚动
4、注意事项
（1）图片没有浮动之前，会有3像素的边距
解决办法：对img{vertical-align:top;}添加这个属性。
（2）图片无缝滚动其实就是把所有的图片在加上一个重复，这个可以参考代码。
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无缝滚动
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...
- [Js]无缝滚动
效果: 1.默认缓慢往左滚动 2.放到左箭头上还是向左滚动,放到右箭头上向右滚动 3.放到图片上停止滚动,移出继续滚动 思路: 1.计算图片列表ul的宽度 2.开启定时器,使其向左边距不断增大,造成向 ...
- 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"> ...
随机推荐
- PHP图形处理函数试题
一.问答题 1.取得当前安装的 GD 库的信息的函数是? 2.取得图像大小的函数是? 3.为一幅图像分配颜色 + alpha的函数是? 4.新建一个基于调色板的图像的函数是? 5.新建一个黑色图像的函 ...
- hosts.deny 和hosts.allow 配置不生效
需求:需要用hosts.deny限制用户通过ssh登录 在/etc/hosts.deny中加入 sshd: all 在/etc/hosts.allow中加入 sshd:all #拒绝所有的ip链接ss ...
- storm serializable
http://www.programgo.com/article/68283366567/
- TextureView+SurfaceTexture+OpenGL ES来播放视频（二）
引自:http://www.jianshu.com/p/b2d949ab1a1a 在使用OpenGL ES 绘制前,我先概括下接下来要做的工作:我先借用一个博主kiffa举的的一个栗子,我觉得说的恰到 ...
- HUST - 1599 Multiple
input 长度不大于3*10e5的数字串 output 不含前导0的能整除64的字串的个数(0算一个,064不算) 一般数组中找能整除一个数的字串都是用取余来做的 用一个a[64]来存下从1-i位累 ...
- Flask architecture
论文The Flask Security Architecture: System Support for Diverse Security Policies 介绍了Flask architectur ...
- Sticks<DFS>
题意: 给n个木棍,这些木棍是由m个长度均为L的木棍切割而来,求L的最小值. 思路: DFS+剪枝. 剪枝: 1:L的取值范围在n(max)和n(sum)之间,逐个枚举.sum%L!=0则L不能用. ...
- RACSignal的Subscription深入
ReactiveCocoa是一个FRP的思想在Objective-C中的实现框架,目前在美团的项目中被广泛使用.对于ReactiveCocoa的基本用法,网上有很多相关的资料,本文不再讨论.RACSi ...
- Chapter 1 First Sight——18
But at least he sent me to an empty desk at the back without introducing me to the class. 但是最后他给我最后面 ...
- Apache无法启动提示the requested operation has failed
主要参考这篇 http://apps.hi.baidu.com/share/detail/15868128 但还是遇到一些问题,记录如下: 1. 配置完成后,restart apache,出现 the ...