滚动测试

/**

* @para obj 目标对象 如:demo,deml1,demo2 中的"demo" 可任意,只要不重复

*

* @para speed 滚动速度 越大越慢

*

* @para direction 滚动方向 包括:left,right,down,up

*

* @para objWidth 总可见区域宽度

*

* @para objHeight 总可见区域高度

*

* @para filePath 存放滚动图片的路径 (如果是自动获取文件夹里的图片滚动)

*

* @para contentById 对某id为contentById下的内容进行滚动 此滚动与filePath不能共存请注意

*

* @para 用法实例 scrollObject("res",50,"up",470,200,"","resource") 对contentById(resource)下内容进行滚动

*

* @para 用法实例 scrollObject("res",50,"up",470,200,"d:\\images\\","") 对filePath(images)下内容自动获取并进行滚动,目前只支持ie

*/

var $ =function(id){return document.getElementById(id)}

// 滚动

function scrollObject(obj,speed,direction,objWidth,objHeight,filePath,contentById)

{

// 执行初始化

if(direction=="up"||direction=="down")

document.write(UDStructure());

else

document.write(LRStructure());

var demo = $(obj);

var demo1 = $(obj+"1");

var demo2 = $(obj+"2");

var speed=speed;

$(contentById).style.display="none"

demo.style.overflow="hidden";

demo.style.width = objWidth+"px";

demo.style.height = objHeight+"px";

demo.style.margin ="0 auto";

if(filePath!="")

demo1.innerHTML=file();

if(contentById!="")

demo1.innerHTML=$(contentById).innerHTML;

demo2.innerHTML=demo1.innerHTML;

// 左右滚动

function LRStructure()

{

var _html ="";

_html+="

";

_html+="

_html+="

";

_html+="

";

// 此处是放要滚动的内容

_html+="

";

_html+="

";

_html+="

";

_html+="

";

_html+="

";

return _html;

}

// 上下滚动的结构

function UDStructure()

{

var _html ="";

_html+="

";

_html+="

_html+="

";

_html+="

";

// 此处是放要滚动的内容

_html+="

";

_html+="

";

_html+="

";

_html+="

";

_html+="

";

_html+="

";

_html+="

";

return _html;

}

// 取得文件夹下的图片

function file()

{

var tbsource = filePath;//本地文件夹路径

filePath = filePath.toString();

if (filePath=="")

return"";

var imgList ="";

var objFSO =new ActiveXObject('Scripting.FileSystemObject');

// 文件夹是否存在

if(!objFSO.FolderExists(tbsource))

{

alert("该文件夹路径不存在,或者路径不能含文件名!");

objFSO =null;

return;

}

var objFolder = objFSO.GetFolder(tbsource);

var colFiles =new Enumerator(objFolder.Files);

var re_inf1 =/\.jpg$/; //验证文件夹文件是否jpg文件

for (;!colFiles.atEnd();colFiles.moveNext()) //读取文件夹下文件

{

var objFile = colFiles.item();

if(re_inf1.test(objFile.Name.toLowerCase()))

{

imgList +="";

}

}

return imgList;

}

// 向左滚

function left()

{

if(demo2.offsetWidth-demo.scrollLeft<=0)

{

demo.scrollLeft-=demo1.offsetWidth;

}

else

{

demo.scrollLeft++;

}

}

// 向右滚

function right()

{

if(demo.scrollLeft<=0)

{

demo.scrollLeft+=demo2.offsetWidth;

}

else

{

demo.scrollLeft--

}

}

// 向下滚

function down()

{

if(demo1.offsetTop-demo.scrollTop>=0)

{

demo.scrollTop+=demo2.offsetHeight;

}

else

{

demo.scrollTop--

}

}

// 向上滚

function up()

{

if(demo2.offsetTop-demo.scrollTop<=0)

{

demo.scrollTop-=demo1.offsetHeight;

}

else

{

demo.scrollTop++

}

}

// 切换方向

function swichDirection()

{

switch(direction)

{

case"left":

return left();

break;

case"right":

return right();

break;

case"up":

return up();

break;

default:

return down();

}

}

// 重复执行

var myMarquee=setInterval(swichDirection,speed);

// 鼠标悬停

demo.οnmοuseοver=function() {clearInterval(myMarquee);}

// 重新开始滚动

demo.οnmοuseοut=function() { myMarquee=setInterval(swichDirection,speed);}

}

scrollObject("sr",50,"right",800,160,"","img")

html不间断滚动图片,Javascript实现图片不间断滚动的代码相关推荐

  1. html5多张图片滚动播放,javascript+html5实现仿flash滚动播放图片的方法_javascript技巧...

    本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法.分享给大家供大家参考.具体如下: html部分: css部分: body{ margin: 0px; padding: ...

  2. html 图片自动滚动播放,javascript+html5实现仿flash滚动播放图片的方法

    本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法.分享给大家供大家参考.具体如下: html部分: css部分: body{ margin: 0px; padding: ...

  3. html无缝滚动原理,JavaScript实现图片无缝滚动效果

    图片无缝滚动就是图片一直不停的滚动,好像没有无穷无尽似的,实际上就是几张图片不停的循环,但是看不出有从最后面切换到最前面的效果,这就是无缝滚动,文字和图片都可以无缝滚动,这里介绍的是图片,文字是同样的 ...

  4. 竖屏图片滚动html5,JavaScript实现图片DIV竖向滑动的方法

    /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 图片滑动展示效果 var $$ = fun ...

  5. JavaScript之图片的无缝滚动

    图片无缝滚动就是图片一直不停的滚动,好像没有无穷无尽似的,实际上就是几张图片不停的循环,但是看不出有从最后面切换到最前面的效果,这就是无缝滚动,文字和图片都可以无缝滚动,这里介绍的是图片,文字是同样的 ...

  6. html使用javascript实现图片滚动无缝拼接

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 【web前端】JavaScript实现图片幻灯片滚动播放动画效果

    JavaScript实现图片幻灯片滚动播放动画效果 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.co ...

  8. javascript实现图片滚动效果

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  9. 怎么弄自动滚动的图片 html,HTML网页上连续滚动图片的制作

    制作方法:相关文件:在页面 ~相关位置加入代码: 新建scrollimg-pic.htm页面,插入相同大小的图片若干张.为使它不停顿地连续播放,请在同一行中,连续插入图片二至三次.类似于文件.在每一张 ...

最新文章

  1. 【c语言】蓝桥杯算法提高 P0401
  2. c# 带返回值的action_C#知识点讲解之C#delegate、event、Action、EventHandler的使用和区别...
  3. java子程序_JAVA-JVM的执行子程序(类加载)
  4. python主函数的作用_python中main函数的用法
  5. Express踩坑系列之上传文件
  6. 下列不可以判断网页是否正常打开的是_打开视频卡、无法加载原因查找
  7. CVE-2021-40444 0 day漏洞利用
  8. 【C++ Primer学习笔记】第2章:变量和基本类型
  9. Linux三剑客之grep 与 egrep
  10. 协程 eventlet
  11. 自己动手开发编译器特别篇——用词法分析器解决背诵圣经问题
  12. Java中输出流重定向小例子
  13. 模型与高性能服务器结合,Epoll模型的高性能服务器丢失数据问题解决
  14. Hexo添加helper-live2d模型
  15. CodeReview流程梳理
  16. 天梯图excl_Excel版CPU天梯图 方便打印.xls
  17. python模拟登录163邮箱_Python实现模拟登录网易邮箱的方法示例
  18. RHCSA (二) —— 常用简单命令Linux文件类型目录操作命令文件操作命令
  19. 使用GAN的图像超分辨率功能彻底消灭模糊图
  20. 流浪地球2投资价值大不大?优势亮点有哪些?未来科幻电影市场潜力大吗?

热门文章

  1. linux shell 读取文件指定单行 多行 连续行 倒数几行
  2. metasploit快速入门(二)收集信息
  3. pkg-config简介 pkgconfig
  4. C语言单链表实现19个功能完全详解
  5. Linux进程状态解析之R、S、D、T、Z、X
  6. shell shock 执行漏洞分析
  7. android html5播放器,android Html5播放器混音解决方案
  8. C 把两个bitmap文件合并成一个bitmap文件
  9. mysql根据叶子找父亲_MySQL:如何在特定节点中查找叶子
  10. 自己如何写mysql数据库_如何写一个属于自己的数据库封装(4)