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中函数的形参与实参的问题说明
Sep 01 PHP
兼容性比较好的PHP生成缩略图的代码
Jan 12 PHP
php Rename 更改文件、文件夹名称
May 24 PHP
PHP之数组学习
May 29 PHP
php定时计划任务与fsockopen持续进程实例
May 23 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
Nov 23 PHP
PHP5.2中PDO的简单使用方法
Mar 25 PHP
ThinkPHP框架里隐藏index.php
Apr 12 PHP
PHP编写登录验证码功能 附调用方法
May 19 PHP
Yii2.0 模态弹出框+ajax提交表单
May 22 PHP
thinkPHP+ajax实现统计页面pv浏览量的方法
Mar 15 PHP
PHP类的自动加载与命名空间用法实例分析
Jun 05 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中4种常用的抓取网络数据方法
2015/06/04 PHP
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
浅析angularJS中的ui-router和ng-grid模块
2016/05/20 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
在Python中编写数据库模块的教程
2015/04/29 Python
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
python 堆和优先队列的使用详解
2019/03/05 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
如何利用python进行时间序列分析
2020/08/04 Python
CSS3中的transform属性进行2D和3D变换的基本用法
2016/05/12 HTML / CSS
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
东方红海科技面试题软件测试方面
2012/02/08 面试题
商务英语应届生自我鉴定
2013/12/08 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
与美同行演讲稿
2014/09/13 职场文书
上班迟到检讨书
2014/09/15 职场文书
2015年科室工作总结
2015/04/10 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
警用民用对讲机找不同
2022/02/18 无线电
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫