html不间断滚动图片,Javascript实现图片不间断滚动的代码
/**
* @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实现图片不间断滚动的代码相关推荐
- html5多张图片滚动播放,javascript+html5实现仿flash滚动播放图片的方法_javascript技巧...
本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法.分享给大家供大家参考.具体如下: html部分: css部分: body{ margin: 0px; padding: ...
- html 图片自动滚动播放,javascript+html5实现仿flash滚动播放图片的方法
本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法.分享给大家供大家参考.具体如下: html部分: css部分: body{ margin: 0px; padding: ...
- html无缝滚动原理,JavaScript实现图片无缝滚动效果
图片无缝滚动就是图片一直不停的滚动,好像没有无穷无尽似的,实际上就是几张图片不停的循环,但是看不出有从最后面切换到最前面的效果,这就是无缝滚动,文字和图片都可以无缝滚动,这里介绍的是图片,文字是同样的 ...
- 竖屏图片滚动html5,JavaScript实现图片DIV竖向滑动的方法
/p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 图片滑动展示效果 var $$ = fun ...
- JavaScript之图片的无缝滚动
图片无缝滚动就是图片一直不停的滚动,好像没有无穷无尽似的,实际上就是几张图片不停的循环,但是看不出有从最后面切换到最前面的效果,这就是无缝滚动,文字和图片都可以无缝滚动,这里介绍的是图片,文字是同样的 ...
- html使用javascript实现图片滚动无缝拼接
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【web前端】JavaScript实现图片幻灯片滚动播放动画效果
JavaScript实现图片幻灯片滚动播放动画效果 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.co ...
- javascript实现图片滚动效果
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 怎么弄自动滚动的图片 html,HTML网页上连续滚动图片的制作
制作方法:相关文件:在页面 ~相关位置加入代码: 新建scrollimg-pic.htm页面,插入相同大小的图片若干张.为使它不停顿地连续播放,请在同一行中,连续插入图片二至三次.类似于文件.在每一张 ...
最新文章
- 【c语言】蓝桥杯算法提高 P0401
- c# 带返回值的action_C#知识点讲解之C#delegate、event、Action、EventHandler的使用和区别...
- java子程序_JAVA-JVM的执行子程序(类加载)
- python主函数的作用_python中main函数的用法
- Express踩坑系列之上传文件
- 下列不可以判断网页是否正常打开的是_打开视频卡、无法加载原因查找
- CVE-2021-40444 0 day漏洞利用
- 【C++ Primer学习笔记】第2章:变量和基本类型
- Linux三剑客之grep 与 egrep
- 协程 eventlet
- 自己动手开发编译器特别篇——用词法分析器解决背诵圣经问题
- Java中输出流重定向小例子
- 模型与高性能服务器结合,Epoll模型的高性能服务器丢失数据问题解决
- Hexo添加helper-live2d模型
- CodeReview流程梳理
- 天梯图excl_Excel版CPU天梯图 方便打印.xls
- python模拟登录163邮箱_Python实现模拟登录网易邮箱的方法示例
- RHCSA (二) —— 常用简单命令Linux文件类型目录操作命令文件操作命令
- 使用GAN的图像超分辨率功能彻底消灭模糊图
- 流浪地球2投资价值大不大?优势亮点有哪些?未来科幻电影市场潜力大吗?
热门文章
- linux shell 读取文件指定单行 多行 连续行 倒数几行
- metasploit快速入门(二)收集信息
- pkg-config简介 pkgconfig
- C语言单链表实现19个功能完全详解
- Linux进程状态解析之R、S、D、T、Z、X
- shell shock 执行漏洞分析
- android html5播放器,android Html5播放器混音解决方案
- C 把两个bitmap文件合并成一个bitmap文件
- mysql根据叶子找父亲_MySQL:如何在特定节点中查找叶子
- 自己如何写mysql数据库_如何写一个属于自己的数据库封装(4)