javascript实现可改变滚动方向的无缝滚动实例
2013-06-17 00:00
591 查看
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0; padding:0;} #imgMove{ height:205px; width:624px; border:#000 1px solid; position:relative; margin:200px auto;overflow:hidden;} #imgMove ul{ height:205px;position:absolute; left:0; overflow:hidden;} #imgMove li{ list-style:none; float:left; height:205px; width:156px; margin:0;} a img,img{ border:none;} span{ z-index:999;height:68px; width:68px; display:none;position:absolute; cursor:pointer;} #moveLeft{left:0; top:68px; } #moveRight{right:-10px; top:68px;} </style> <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('imgMove'); var oUl=oDiv.getElementsByTagName('ul')[0]; var oli=oUl.getElementsByTagName('li'); var liSpeed=1; var ospan=oDiv.getElementsByTagName('span'); var rightmove=document.getElementById('moveRight'); var leftmove=document.getElementById('moveLeft'); function show(){ ospan[0].style.display="block"; ospan[1].style.display="block"; } oUl.onmouseover=function (){ show(); } oUl.onmouseout=function(){ ospan[0].style.display="none"; ospan[1].style.display="none"; } ospan[0].onmouseover=function(){ liSpeed=1; show();/*加这个函数是为了去除向左向右的图片闪动*/ } ospan[1].onmouseover=function(){ liSpeed=-1; show();/*加这个函数是为了去除向左向右的图片闪动*/ } oUl.style.width=oli[0].offsetWidth*oli.length+'px';; setInterval(function(){ oUl.style.left=oUl.offsetLeft-liSpeed+'px'; if(oUl.offsetLeft<-oUl.offsetWidth/2){ oUl.style.left=0; } else if(oUl.offsetLeft>0) { oUl.style.left=-oUl.offsetWidth/2+'px'; } },30) } </script> </head> <body> <div id="imgMove"> <ul> <li><a href="#"><img src="images/1.png" /></a></li> <li><a href="#"><img src="images/2.png" /></a></li> <li><a href="#"><img src="images/3.png" /></a></li> <li><a href="#"><img src="images/4.png" /></a></li> <li><a href="#"><img src="images/1.png" /></a></li> <li><a href="#"><img src="images/2.png" /></a></li> <li><a href="#"><img src="images/3.png" /></a></li> <li><a href="#"><img src="images/4.png" /></a></li> </ul> <span id="moveLeft"><img src="images/left.png" /></span> <span id="moveRight"><img src="images/right.png" /></div> </div> </body> </html>
相关文章推荐
- javascript实现可改变滚动方向的无缝滚动实例
- javascript实现的可改变滚动方向的无缝滚动
- javascript实现的可改变滚动方向的无缝滚动
- JavaScript中实现无缝滚动、分享到侧边栏实例代码
- 纯javascript实现四方向文本无缝滚动效果
- 纯javascript实现四方向文本无缝滚动效果
- javascript实现文字图片上下滚动的具体实例
- javascript实现左右控制无缝滚动
- JavaScript学习笔记——简单无缝循环滚动展示图片的实现
- div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox
- JavaScript实现图片无缝滚动效果
- javascript实现手机触摸屏左右(上下)滚动(javascript感知滑屏方向)
- javascript实现文字列表无缝向上滚动
- Javascript 实现全屏滚动实例代码
- Javascript实现无缝滚动的问题讨论
- javascript改变position值实现菜单滚动至顶部后固定
- jquery实例-多张图片无缝滚动实现
- Javascript 实现图片无缝滚动
- 使用Javascript简单实现图片无缝滚动
- javascript实现滚动效果的数字时钟实例