php教程

超轻量级php框架startmvc

JavaScript实现滚动栏效果的方法

更新时间:2020-03-04 00:00:41 作者:startmvc
本文实例讲述了JavaScript实现滚动栏效果的方法。分享给大家供大家参考。具体如下:<!DOC

本文实例讲述了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程序设计有所帮助。

JavaScript 滚动栏效果