JavaScript实现滚动栏效果的方法

yipeiwu_com5年前PHP代码库

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

相关文章

php中数字0和空值的区别分析

作为一个合格的php程序员,一些基础知识是必须要知道的,例如0和空的区别,关于这个区别,下面就通过几个实例进行简单的分析,其中的道理,只可意会,不可言传,读者可以自己去慢慢体会了。 复制...

php HandlerSocket的使用

Memcache数据一致性的问题:当MySQL数据变化后,如果不能及时有效的清理掉过期的数据,就会造成数据不一致。这在强调即时性的Web2.0时代,不可取。 Memcache崩溃后的...

PHP使用SOAP扩展实现WebService的方法

本文实例讲述了PHP使用SOAP扩展实现WebService的方法。分享给大家供大家参考,具体如下: 最近在一个PHP项目中对接外部接口涉及到WebService,搜索引擎上相关文章不是...

PHP教程之PHP中shell脚本的使用方法分享

作为命令语言,它交互式解释和执行用户输入的命令或者自动地解释和执行预先设定好的一连串的命令;作为程序设计语言,它定义了各种变量和参数,并提供了许多在高阶语言中才具有的控制结构,包括循环和...

PHP下打开URL地址的几种方法小结

1: 用file_get_contents 以get方式获取内容 复制代码 代码如下: <?php $url='http://www.baidu.com/'; $html = fi...