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"> ...
随机推荐
- uCGUI的文字与数值显示方法
uCGUI的数值显示非常的灵活方便,是制作LCD界面非常好的选择. 文字与数值显示的方法: 常用文本显示函数: void GUI_DispStringAt(const char GUI_FAR *s, ...
- doclint in jdk8
http://blog.joda.org/2014/02/turning-off-doclint-in-jdk-8-javadoc.html Turning off doclint in JDK 8 ...
- jsonarray和jsonobject
JSONArray ja = new JSONArray(); ja.put("11"); ja.put("22"); ja.put("33" ...
- opatch auto in windows db in 11.2.0.4
--prapare:copy 192.168.63.83 D:\oracle_patch\1612 to 192.168.2.169 D:\oracle_patch\1612cd D:\oracle_ ...
- 转 EXPDP ORA-39095 ORA-3909 错误
今天帮同事在测试库上导出两张表,第一张表大小为30M,第二章表大小为7G,以下是expdp语法 expdp tranuser/******** parallel=4 content=data_only ...
- js操作select和option
1.动态创建select function createSelect(){ var mySelect = document.createElement_x("select"); m ...
- 修改config.php配置
$data=array( "name"=>"222222", "tel"=>159131, "address" ...
- C++调用C#之C# COM控件
C#做界面真的是比C++方便多了,所以尝试了一下,使用C++做核心功能(例如绘图),然后用C#来做节目(例如对话框),考虑到以后可能不能使用.net,使用DLL做一个隔离层,隔离C++和C#,方便以后 ...
- MongoDB和Redis区别
简介 MongoDB更类似Mysql,支持字段索引.游标操作,其优势在于查询功能比较强大,擅长查询JSON数据,能存储海量数据,但是不支持事务. Mysql在大数据量时效率显著下降,MongoDB更多 ...
- java断点
第一步: 用firefox运行程序,当点击保存,提示保存失败后,启动firebug 通过请求找到addNew.ezt出现错误,在eztnews.xml里通过ctrl+F查找找到请求执行的类和方法 找到 ...