javascript控制图片播放的实现代码
更新时间：2020年07月29日 13:19:58 投稿：lijiao
这篇文章主要介绍了javascript控制图片播放的实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一般实现用鼠标控制图片的滚动效果都比较麻烦，大段大段的代码让新手头疼无从下手，下面我来写个简单的javascript控制图片滚动的效果。代码简洁明了，兼容ie、firefox和google浏览器。
分享代码如下：
<html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>javascript控制图片或div层的上下移动滚动效果</title>
</head>
<body>
<a href="javascript: void(0);" onmouseover="ScrollDivUp_T=setInterval(ScrollDivUp,10);" onmouseout="clearInterval(ScrollDivUp_T)">上</a>
<div id="items" style="margin:5px 0px 5px 0px;width:100px;height:200px;border:1px solid #dddddd;overflow:hidden">
图片1...<br />
图片2...<br />
图片3...<br />
图片4...<br />
图片5...<br />
图片6...<br />
图片7...<br />
图片8...<br />
图片9...<br />
图片10...<br />
图片11...<br />
图片12...<br />
图片13...<br />
图片14...<br />
图片15...<br />
图片16...<br />
图片17...<br />
图片18...<br />
图片19...<br />
图片20...
</div>
<a href="javascript: void(0);" onmouseover="ScrollDivDown_T=setInterval(ScrollDivDown,10);" onmouseout="clearInterval(ScrollDivDown_T)">下</a>
<script language="javascript">
function ScrollDivUp(){document.getElementById('items').scrollTop -= 1;}
function ScrollDivDown(){document.getElementById('items').scrollTop += 1;}
</script>
</body>
</html>
运行效果图：
以上就是实现javascript控制图片滚动的效果，希望大家可以喜欢。
相关文章
这几个demo上星期平安夜做的，感觉效果不错，就放在出来，分享给大家2012-01-01
前端发展过程中有许多性能优化的操作,比如防抖、节流和图片懒加载等,在这里我们首先聊聊图片懒加载操作,我们会经常逛像淘宝和京东等购物平台,一次性全部加载会导致加载时间长、网络资源消耗大,所以本文给大家介绍了JavaScript优化图片懒加载的性能技巧2024-06-06
这篇文章主要为大家介绍了JS浏览器的首屏白屏时间计算示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
javascript中onclick与listeners的执行先后问题一直都是大家所疑惑的地方，接下来将为大家解决此疑惑，感兴趣的朋友可以了解下哦2013-01-01
这篇文章主要介绍了JavaScript实现打印星型金字塔功能,结合具体实例形式分析了javascript针对输出任意给定行数星型金字塔图形的原理与相关实现技巧,需要的朋友可以参考下2017-09-09
js下的一些小技巧，需要的朋友可以下。2009-12-12
最近同事问了一个问题，说在js中如果函数与对象重名了会怎么样？仔细详细这个问题值得讨论一下，所以便有了这篇文章，这篇文章主要给大家介绍了关于JavaScript中重名的函数与对象的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧啊。2017-09-09
本文通过实例代码给大家介绍了bootstrap的modal拖动效果，非常不错，代码简单易懂，具有参考借鉴价值，需要的朋友参考下吧2016-12-12
今天移动端正好需要图片触摸滑动效果实现代码，基于swiper实现,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了javascript如何返回字符串的所有排列问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
最新评论