JavaScript实现滚动栏效果的方法

2020-03-22 18:03:16

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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. unction(){ speed=-2; oright. function () { speed=2; oUl. unction(){ 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" 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程序设计有所帮助。PHP教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：JavaScript中一些常用的正则表达式(推荐)

下一篇：比较全面的C 、Java、JavaScript中的正则表达式详解