JavaScript实现滚动栏效果的方法


Posted in PHP onApril 27, 2015

本文实例讲述了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 disk_free_space 返回目录可用空间
May 10 PHP
ezSQL PHP数据库操作类库
May 16 PHP
php更改目录及子目录下所有的文件后缀的代码
Sep 24 PHP
在smarty模板中使用PHP函数的方法
Apr 23 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
Aug 07 PHP
PHP JS Ip地址及域名格式检测代码
Sep 27 PHP
PHP命名空间(namespace)的使用基础及示例
Aug 18 PHP
php连接与操作PostgreSQL数据库的方法
Dec 25 PHP
php使用数组填充下拉列表框的方法
Mar 31 PHP
php比较相似字符串的方法
Jun 05 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
May 26 PHP
thinkphp分页集成实例
Jul 24 PHP
php curl 上传文件代码实例
Apr 27 #PHP
php把大写命名转换成下划线分割命名
Apr 27 #PHP
PHP加密解密字符串汇总
Apr 26 #PHP
php开发中的页面跳转方法总结
Apr 26 #PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
Apr 26 #PHP
PHP开启opcache提升代码性能
Apr 26 #PHP
php格式化电话号码的方法
Apr 24 #PHP
You might like
PHP 彩色文字实现代码
2009/06/29 PHP
PHP 页面编码声明方法详解(header或meta)
2010/03/12 PHP
PHP eval函数使用介绍
2013/12/08 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
JavaScript类和继承 constructor属性
2010/03/04 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
JavaScript函数详解
2015/02/27 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
python如何建立全零数组
2020/07/19 Python
python re的findall和finditer的区别详解
2020/11/15 Python
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
办理房产过户的委托书
2014/09/14 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
Vue中Object.assign清空数据报错的解决方案
2022/03/03 Vue.js