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

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

分享代码如下：

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

<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控制图片滚动的效果，希望大家可以喜欢。

赞 (0)

相关推荐

  • javascript 控制图片播放代码

    javascript 控制图片播放代码

    无标题文档 .photo {width:896px;height:280px;border-top:0;border-right:2px solid #9f9fa1;border-bottom:1px solid #9f9fa1;border-left:2px solid #9f9fa1;font-size:12px} .photo .left {width:310px;height:222px;margin:0 5px} .photo .left img {width:310px;height

  • 比较炫的图片播放器 js 焦点效果代码

    图片播放器_图片轮换_焦点效果 #focus_m{position:relative; width:420px; height:384px; background:#133775} .f_img_roll{width:350px; height:300px; position:relative;} .f_img_roll img{position:absolute; left:0; top:0; width:350px; height:300px;} .f_img_tree{position:a

  • js 新浪的一个图片播放图片轮换效果代码

    js 新浪的一个图片播放图片轮换效果代码

    核心代码 复制代码 代码如下: function slide(src,link,text,target,attr,desc) {   this.desc = desc   this.src = src;   this.link = link;   this.text = text;   this.target = target;   this.attr = attr;   if (document.images) {     this.image = new Image();   }   thi

  • jquery图片播放浏览插件prettyPhoto使用详解

    jquery图片播放浏览插件prettyPhoto使用详解

    一.prettyPhoto简介 prettyPhoto是一款基于jquery的轻量级的lightbox图片播放浏览插件,它不仅支持图片,还同时支持视频.flash.YouTube.iframe和ajax.而且prettyPhoto配置和使用都十分简单,扩展性也不错,你可以最大限度地自定义prettyPhoto.目前,prettyPhoto兼容大部分主流的浏览器,包括令人纠结的IE6. prettyPhoto插件的项目地址:http://www.no-margin-for-errors.com/p

  • TFDN图片播放器 不错自动播放

    复制代码 代码如下: <html> <head> <title>52515.net上传程序</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css">     <!--     body,td,th {     font-size

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

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

    一般实现用鼠标控制图片的滚动效果都比较麻烦,大段大段的代码让新手头疼无从下手,下面我来写个简单的javascript控制图片滚动的效果.代码简洁明了,兼容ie.firefox和google浏览器. 分享代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • JavaScript控制图片360度旋转代码

    JavaScript控制图片360度旋转代码

    JavaScript控制图片360度旋转代码 var isIE = (document.uniqueID)?1:0; var i=1; function rotate(image) { var object = image.parentNode; if(isIE){ image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")"; i++; if(i>4) {i

  • JavaScript控制图片加载完成后调用回调函数的方法

    本文实例讲述了JavaScript控制图片加载完成后调用回调函数的方法.分享给大家供大家参考.具体分析如下: 这段代码可以控制指定区域内的图片加载完成后执行指定的回调函数. 复制代码 代码如下: function when_images_loaded($img_container, callback) { /* do callback when images in $img_container (jQuery object) are loaded. Only works when ALL ima

  • 网页里控制图片大小的相关代码

    1.用鼠标拖动来改变大小 <SCRIPT LANGUAGE="JavaScript">function resizeImage(evt,obj){newX=evt.xnewY=evt.yobj.width=newXobj.height=newY}</script><img src="7say.gif" ondrag="resizeImage(event,this)">2.用鼠标滚动控制图片大小 <img

  • JavaScript实现图片轮播组件代码示例

    JavaScript实现图片轮播组件代码示例

    本文介绍了JavaScript实现图片轮播组件,废话不多说了直接看下面: 效果: 自动循环播放图片,下方有按钮可以切换到对应图片. 添加一个动画来实现图片切换. 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片. 鼠标移开图片区域时,从当前位置继续轮播. 提供一个接口,可以设置轮播方向,是否循环,间隔时间. 对HTML.CSS的要求: <div class="carousel-box"> <div class="carousel"&g

  • JavaScript实现图片滑动切换的代码示例分享

    假设我们这里有1到5五张bmp图片,那么控制图片切换显示的核心代码可以为: <script> var i=1; var img = new Array(); img[0] = "1.bmp"; img[1] = "2.bmp"; img[2] = "3.bmp"; img[3] = "4.bmp"; img[4] = "5.bmp"; function playImg(){ i=i+1; var

  • JavaScript 控制图片改变重叠顺序的代码(鼠标移动切换)

    JavaScript 控制图片改变重叠顺序的代码(鼠标移动切换)

    改变图片重叠顺序 .s1{position:absolute; top:10;left:10; } .s2{position:absolute; top:50;left:50; } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 原生javascript实现图片轮播效果代码

    看到BlueDream在他博客上写的javascript仿QQ滑动菜单的效果,代码实在是优雅,相比较差别一下就凸显了,下次再把他代码的精髓偷过来,嘿嘿. [原理简述] html和css跟JQuery实现图片轮播效果里面的一样,略去.主要是几个公共函数,渐显和渐失,用闭包实现.至于主体逻辑部分,非常一般. [程序源码] 贴几个公共函数算了,fadeIn,渐显,fadeOut,渐失 复制代码 代码如下: function id(name) {return document.getElementByI

  • CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]

    今天用了很久时间终于解决了这个问题,基本完美了,唯一不完美的就是 IE 6 只有在图片完全下载完成后才会自动调整大小,不过聊胜于无,总比进入页面后看到长长的横向滚动条舒服的多,这里使用了 expression,但是利用了一次加载,所以 expression 不会造成内存泄漏.当然,如果你有更好的解决方案,希望能与我交流. 代码如下: .Image { max-width:600px;height:auto;cursor:pointer; border:1px dashed #4E6973;pad

随机推荐