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 相关文章推荐
PHP5 安装方法
Oct 09 PHP
PHP下几种删除目录的方法总结
Aug 19 PHP
php遍历数组的方法分享
Mar 22 PHP
PHP函数学习之PHP函数点评
Jul 05 PHP
通过缓存数据库结果提高PHP性能的原理介绍
Sep 05 PHP
PHP中的生成XML文件的4种方法分享
Oct 06 PHP
php对mongodb的扩展(初出茅庐)
Nov 11 PHP
php使用curl访问https示例分享
Jan 17 PHP
phpstorm配置Xdebug进行调试PHP教程
Dec 01 PHP
ecshop 2.72如何修改后台访问地址
Mar 03 PHP
基于php实现随机合并数组并排序(原排序)
Nov 26 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
Aug 11 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学习笔记之 函数声明(二)
2011/06/09 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
php中file_exists函数使用详解
2015/05/08 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
为指定元素增加样式的js代码
2009/12/09 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
python中类的一些方法分析
2014/09/25 Python
Python基于PycURL实现POST的方法
2015/07/25 Python
python如何代码集体右移
2020/07/20 Python
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
免税水晶:Duty Free Crystal
2019/05/13 全球购物
学习标兵获奖感言
2014/02/20 职场文书
个人剖析材料范文
2014/09/30 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
教师工作能力自我评价
2015/03/04 职场文书
浅析InnoDB索引结构
2021/04/05 MySQL