JavaScript实现滚动栏效果的方法

时间：2021-05-26

本文实例讲述了JavaScript实现滚动栏效果的方法。分享给大家供大家参考。具体如下：

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } #div1 ul{ position: absolute; left: 0px; top: 0px; } #div1 ul li img { width: 187px; height: 125px; } #div1 ul li{ float: left; width: 187px; height: 125px; list-style: none; } #div1{ width: 748px; height: 125px; position: relative; background-color: chartreuse; overflow: hidden; float: left; } #body{ width: 948px; height: 125px; margin: 100px auto; } #body #leftDiv{ float: left; width: 100px; height: 100px; } #body #rightDiv{ float: left; width: 100px; height: 100px; } #body #leftDiv button{ background-image: url("image/left.PNG"); width: 100px; height: 100px; } #body #leftDiv button img{ width: 100px; height: 100px; } #body #rightDiv button img{ width: 100px; height: 100px; } </style> <script> window.onload=function(){ var oDiv=document.getElementById('div1'); var oUl=oDiv.getElementsByTagName('ul')[0]; var oLi=oUl.getElementsByTagName('li'); var oLeft=document.getElementById('leftDiv'); var oright=document.getElementById('rightDiv'); oUl.innerHTML+=oUl.innerHTML; oUl.style.width=oLi[0].offsetWidth*oLi.length+'px'; var speed=-2; function move(){ if (oUl.offsetLeft<-oUl.offsetWidth/2){ oUl.style.left='0'; }else if(oUl.offsetLeft>0){ oUl.style.left=-oUl.offsetWidth/2+'px'; } oUl.style.left=oUl.offsetLeft+speed+'px'; }; var timer=setInterval(move,30); oLeft.onclick=function(){ speed=-2; }; oright.onclick= function () { speed=2; }; oUl.onmouseover=function(){ clearInterval(timer); }; oUl.onmouseout=function(){ timer=setInterval(move,30); }; } </script> </head> <body> <div id="body"> <div id="leftDiv"><button><img src="image/left.PNG"/></button></div> <div id="div1"> <ul> <li><img src="image/1.JPG"/></li> <li><img src="image/2.JPG"/></li> <li><img src="image/3.JPG"/></li> <li><img src="image/4.JPG"/></li> </ul> </div> <div id="rightDiv"><button><img src="image/right.PNG"/></button></div> </div> </body> </html>

希望本文所述对大家的javascript程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章