JavaScript实现滚动栏效果的方法

更新时间：2015年04月27日 09:26:52 作者：亲爱的汉尼拔

这篇文章主要介绍了JavaScript实现滚动栏效果的方法,涉及javascript操作html元素实现滚动的相关技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了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中&&和||逻辑运算符的高级简写(缩写条件)用法由浅入深讲解
php中if进行多条件判断时，使用逻辑运算符&&和||(and和or)，这样的写法很常见也很熟悉。&&和||还有高级简写(缩写条件)用法，比如单独一行中“条件A||条件B”进行了什么操作？本文将由浅入深详细讲解php中&&和||逻辑运算符的高级简写(缩写条件)用法。
2022-11-11
php Ajax乱码
其实说到底就是编码问题一般中文页都用GBK或者GB2312的编码
2008-04-04
php检查页面是否被百度收录
这篇文章主要介绍了php检查页面是否被百度收录，使用php实现批处理检测页面是否被百度收录的功能，感兴趣的小伙伴们可以参考一下
2015-10-10
php中如何执行linux命令详解
开发中遇到一种问题，需要在php函数中运行Linux系统代码，所以下面这篇文章主要给大家介绍了关于php中如何执行linux命令的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
2018-11-11
php 下载保存文件保存到本地的两种实现方法
以下是对php下载保存文件保存到本地的两种实现方法进行了介绍，需要的朋友可以过来参考下
2013-08-08
解析PayPal支付接口的PHP开发方式
PayPal 快速、安全而又方便，是跨国交易的首选在线付款方式。现在PayPal支付接口可以和国内大部分信用卡关联,可以实现国人的跨国交易收支。
2010-11-11
PHP实现一维数组与二维数组去重功能示例
这篇文章主要介绍了PHP实现一维数组与二维数组去重功能,结合实例形式分析了php针对一维数组与二维数组进行遍历、判断、排序、去重等相关操作技巧,需要的朋友可以参考下
2018-05-05
PHP数组操作类实例
这篇文章主要介绍了PHP数组操作类,涉及php针对数组的删除、转换、分组、排序等相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
php 动态执行带有参数的类方法
PHP中，在事先知道类和类的方法名称，使用call_user_func函数可以做动态执行。
2009-04-04
一文详解PHP连接MySQL数据库的三种方式
PHP与MySQL的连接有三种API接口，分别是：PHP的MySQL扩展、PHP的mysqli扩展、PHP数据对象(PDO)。本文将详解这三种方式的示例代码，需要的可以参考一下
2022-05-05