javascript实现控制图片播放的代码分享

巴扎黑

发布时间：2017-09-06 10:21:13

1512人浏览过

来源于php中文网

原创

一般实现用鼠标控制图片的滚动效果都比较麻烦，大段大段的代码让新手头疼无从下手，下面我来写个简单的javascript控制图片滚动的效果。代码简洁明了，兼容ie、firefox和google浏览器。

分享代码如下：

zuojiankuohaophpcn!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
zuojiankuohaophpcnhtml xmlns="http://www.w3.org/1999/xhtml">

zuojiankuohaophpcnhead>
zuojiankuohaophpcnmeta http-equiv="Content-Type" content="text/html; charset=utf-8" />
zuojiankuohaophpcnmeta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
zuojiankuohaophpcntitle>javascript控制图片或p层的上下移动滚动效果zuojiankuohaophpcn/title>
zuojiankuohaophpcn/head>

zuojiankuohaophpcnbody>

zuojiankuohaophpcna href="javascript: void(0);" onmouseover="ScrollpUp_T=setInterval(ScrollpUp,10);" onmouseout="clearInterval(ScrollpUp_T)">上zuojiankuohaophpcn/a>
zuojiankuohaophpcnp id="items" style="margin:5px 0px 5px 0px;width:100px;height:200px;border:1px solid #dddddd;overflow:hidden">
  图片1...zuojiankuohaophpcnbr />
  图片2...zuojiankuohaophpcnbr />
  图片3...zuojiankuohaophpcnbr />
  图片4...zuojiankuohaophpcnbr />
  图片5...zuojiankuohaophpcnbr />
  图片6...zuojiankuohaophpcnbr />
  图片7...zuojiankuohaophpcnbr />
  图片8...zuojiankuohaophpcnbr />
  图片9...zuojiankuohaophpcnbr />
  图片10...zuojiankuohaophpcnbr />
  图片11...zuojiankuohaophpcnbr />
  图片12...zuojiankuohaophpcnbr />
  图片13...zuojiankuohaophpcnbr />
  图片14...zuojiankuohaophpcnbr />
  图片15...zuojiankuohaophpcnbr />
  图片16...zuojiankuohaophpcnbr />
  图片17...zuojiankuohaophpcnbr />
  图片18...zuojiankuohaophpcnbr />
  图片19...zuojiankuohaophpcnbr />
  图片20...
zuojiankuohaophpcn/p>
zuojiankuohaophpcna href="javascript: void(0);" onmouseover="ScrollpDown_T=setInterval(ScrollpDown,10);" onmouseout="clearInterval(ScrollpDown_T)">下zuojiankuohaophpcn/a>
zuojiankuohaophpcnscript language="javascript">
  function ScrollpUp(){document.getElementById("items").scrollTop -= 1;}
  function ScrollpDown(){document.getElementById("items").scrollTop += 1;}
zuojiankuohaophpcn/script>

zuojiankuohaophpcn/body>

zuojiankuohaophpcn/html>

运行效果图：

Modoer多功能点评系统2.5 精华版 Build 20110710 UTF8

Modoer 是一款以本地分享，多功能的点评网站管理系统。采用 PHP+MYSQL 开发设计，开放全部源代码。因具有非凡的访问速度和卓越的负载能力而深受国内外朋友的喜爱，不局限于商铺类点评，真正实现了多类型的点评，可以让您的网站点评任何事与物，同时增加产品模块，也更好的网站产品在网站上展示。Modoer点评系统 2.5 Build 20110710更新列表1.同步旗舰版系统框架2.增加限制图片

下载