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"> ...
随机推荐
- Linux 系统监控
*lsof 列出打开的文件 常用 lsof -i:8080*htop进程监控iotop(bugs)iptraf实时局域网IP监控psacct 监视用户活动monit Linux进程和服务监控工具* ...
- Entity FrameWork 实体属性为decimal时默认只保存2位小数
问题描述:当采用EF的DbContext保存decimal类型数据到数据库,默认只会保存小数点后的前2位小数,其余均置0:例如保存101.182352152322,实际存到数据库里的数据为101.18 ...
- Rsync数据远程同步备份
rsync的使用方法 一.设置Rsync Server端 Rsync server需要设定四个方面: 1．规划建立备份目录区 2．设定: /etc/xinetd.d/rsync 3．设定: /etc/ ...
- mysql开启/关闭 update delete 安全模式
在使用mysql执行update的时候,如果不是用主键当where语句,会报如下错误,使用主键用于where语句中正常. 异常内容:Error Code: 1175. You are using sa ...
- wget mirror
wget -r -np -c xxx-url-xxx -r: recursive-np: no-parent-c: continue -D: domains to follow, comma sepa ...
- 一篇非常适合git入门的文章
http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137583770360579 ...
- Batch Sort
Batch Sort time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...
- VS2010+PCL+openni配置
PCL中文论坛:http://www.pclcn.org/bbs/forum.php 1.安装 pcl 的完全安装包可以到: http://pointclouds.org/downloads/wind ...
- struts2中的值栈对象ValueStack
ValueStack, 即值栈对象. 值栈对象: 是整个struts数据存储的核心,或者叫中转站. 用户每次访问struts的action,都会创建一个Action对象.值栈对象.ActionCont ...
- linux视频学习（简单介绍）20160405
看一周学会linux系统的学习笔记. 1.linux系统是一个安全性高的开源,免费的多用户多任务的操作系统. 2.linux工作分为linux系统管理员,linux程序员(PC上软件开发,嵌入式开发) ...