1115学习记录 无缝滚动
来源:互联网 发布:张艺兴发布会知乎 编辑:程序博客网 时间:2024/05/29 11:50
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>* {margin:0; padding:0;}#div1 {width:712px; height:108px; margin:100px auto; position:relative; background:red; overflow:hidden;}#div1 ul {position:absolute; left:0; top:0;}#div1 ul li {float:left; width:178px; height:108px; list-style:none;}</style><script>window.onload=function (){ var oDiv=document.getElementById('div1'); var oUl=oDiv.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li'); var speed=-2; //oUl.innerHTML=oUl.innerHTML+oUl.innerHTML; oUl.innerHTML+=oUl.innerHTML; oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; function move(){ if(oUl.offsetLeft<-oUl.offsetWidth/2) { oUl.style.left='0'; } if(oUl.offsetLeft>0) { oUl.style.left=-oUl.offsetWidth/2+'px'; } oUl.style.left=oUl.offsetLeft+speed+'px'; } var timer=setInterval(move, 30); oDiv.onmouseover=function () { clearInterval(timer); }; oDiv.onmouseout=function () { timer=setInterval(move, 30); }; document.getElementsByTagName('a')[0].onclick=function () { speed=-2; }; document.getElementsByTagName('a')[1].onclick=function () { speed=2; };};</script></head><body><a href="javascript:;">向左走</a><a href="javascript:;">向右走</a><div id="div1"> <ul> <li><img src="img2/1.jpg" /></li> <li><img src="img2/2.jpg" /></li> <li><img src="img2/3.jpg" /></li> <li><img src="img2/4.jpg" /></li> </ul></div></body></html>
0 0
- 1115学习记录 无缝滚动
- [学习记录]JS图片滚动代码(无缝、平滑)
- js学习---无缝滚动
- 无缝滚动
- 无缝滚动
- 无缝滚动
- 无缝滚动
- 无缝滚动
- 无缝滚动
- 无缝滚动
- 无缝滚动
- 无缝滚动
- 无缝滚动
- 无缝滚动
- 无缝滚动
- 无缝滚动
- 无缝滚动
- 无缝滚动
- 安装python的一些工具包---备忘录
- 白话设计模式《模板模式》《策略模式》《代理模式》
- Git常用命令
- 查询数据库中的任意一条语句sql、 random
- mongodb shareded cluster中的概念
- 1115学习记录 无缝滚动
- ubuntu使用中遇到问题及解决方法
- ubuntu14.04下安装opencv-2.4.9
- linux帐号管理篇
- appium 自动化测试之知乎Android客户端-识别元素
- 202. Happy Number
- 解决docker容器中,日志中文乱码问题
- 画三角形
- UML初识