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"> ...
随机推荐
- ul li排版 左右对齐
定义两个ul的class, 一个向左浮动, 一个向右浮动 #navtop{ width:100%; height:46px; background-color:#ecf0 ...
- rsync unison+inotify双向实时同步
rsync多线程同步 A:文件服务器 ip:10.10.1.10 B:备份服务器 ip:10.10.1.11 1.在B服务器上安装rsync软件 tar xzvf rsync-3.1.0.tar.gz ...
- sqlserver 批量修改表前缀
先把第一句话放到sqlserver查询器中执行一下.然后把查询结果复制出来,进行编辑...一看你就懂了..简单的sql语句拼装 select ' exec sp_rename "' + na ...
- 倒计时demo
#import <UIKit/UIKit.h> @interface ViewController : UIViewController @property (strong,nonatom ...
- ubuntu环境下安装Tomcat
tomcat 是javaweb开发的本地服务器,tomcat是目前比较流行的一款. 1.下载Tomcat:http://tomcat.apache.org 2.进入下载文件夹解压Tomcat:sudo ...
- java 线程的中断
Example12_6.java public class Example12_6 { public static void main(String args[]) { ClassRoom room6 ...
- WindowsAPI 之 CreatePipe、CreateProcess
MSDN介绍 CreatePipe A pipe is a section of shared memory that processes use for communication. The pro ...
- jq之简单的表单验证
<body> <form method="post" action=""> <div class="int"& ...
- PVST+(每个VLAN 的生成树PVST 加)
PVST+(每个VLAN 的生成树PVST 加) 实验拓扑: 分别在 SW1 和SW2 上show spanning-tree 查看结果: SW1#show spanning-tree VLAN000 ...
- mysql链接表，connection string, federated engine
http://database.51cto.com/art/201011/234561.htm