Javascript实现图片不间断滚动的代码
蛮优秀的一段效果代码，可以上下左右滚动，收藏了！！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>滚动测试</title>
<script type="text/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+="<div id='"+obj+"' >";
_html+="<table border='0' align='left' cellpadding='0' cellspacing='0' cellspace='0'>";
_html+="<tr>";
_html+="<td nowrap='nowrap' id='"+obj+"1' >";
// 此处是放要滚动的内容
_html+="</td>";
_html+="<td nowrap='nowrap' id='"+obj+"2' ></td>";
_html+="</tr>";
_html+="</table>";
_html+="</div>";
return _html;
}
// 上下滚动的结构
function UDStructure()
{
var _html ="";
_html+="<div id="+obj+" >";
_html+="<table border='0' align='left' cellpadding='0' cellspacing='0' cellspace='0'>";
_html+="<tr>";
_html+="<td id='"+obj+"1' >";
// 此处是放要滚动的内容
_html+="</td>";
_html+="</tr>";
_html+="<tr>";
_html+="<td id='"+obj+"2' ></td>";
_html+="</tr>";
_html+="</table>";
_html+="</div>";
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("<"+tbsource+">该文件夹路径不存在，或者路径不能含文件名！");
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 +="<img src="+filePath+"/"+objFile.Name+">";
}
}
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.onmouseover=function() {clearInterval(myMarquee);}
// 重新开始滚动
demo.onmouseout=function() { myMarquee=setInterval(swichDirection,speed);}
}
</script>
</head>
<body>
<div id="img">
<table width="1000" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td width="200"><img src="http://attach.e.iciba.com/attachment/200910/22/4188617_12561994098532.jpg" alt="" width="200" height="150"/></td>
<td width="200"><img src="http://pica.nipic.com/2008-05-27/2008527145211519_2.jpg" alt="" width="200" height="150"/></td>
<td width="200"><img src="http://pic4.nipic.com/20090823/383152_215728074589_2.jpg" alt="" width="200" height="150"/></td>
<td width="200"><img src="http://pic8.nipic.com/20100628/4643449_170245009531_2.jpg" alt="" width="200" height="150"/></td>
<td width="200"><img src="http://pica.nipic.com/2008-05-30/20085309524648_2.jpg" alt="" width="200" height="150"/></td>
</tr>
</table>
</div>
<script type="text/javascript">
scrollObject("sr",50,"right",800,160,"","img")
</script>
</body>
</html>
以上就是本文的全部内容，了解更多JavaScript的语法，大家可以查看：《JavaScript 参考教程》、《JavaScript代码风格指南》，也希望大家多多支持我们。
相关推荐
-
javascript实现图片左右滚动效果【可自动滚动，有左右按钮】
本文实例讲述了javascript实现图片左右滚动效果.分享给大家供大家参考,具体如下: html代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <
-
JavaScript代码实现图片循环滚动效果
1.概述 循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片. 2.技术要点 主要应用setTimeout()方法实现图片的循环滚动效果.setTimeout()方法的语法格式如下: setTimeout(function,milliseconds,[arguments]) 参数说明: a. function:要调用的JavaScript自定义函数名称. b. Milliseconds:设置超时时间(以毫秒为单位). 功能:经过超时时间后
-
js实现按钮控制带有停顿效果的图片滚动
本文实例使用js实现带有停顿效果的图片滚动,受按钮控制,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动2</title> <style> #warp{ width: 1250px; height: 300px; overflow: hidden; margi
-
JS实现图片的不间断连续滚动的简单实例
js替代marquee实现图片无缝滚动 可能大家都碰到过,当marquee中滚动的是图片的时候,滚到终点的时候直接就跳回到起点了,而不像文字那样可以无缝滚动,下面介绍的是通过js来实现图片的无缝滚动. 先了解一下下面这几个属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop: 设置或获取位于对象最顶端和窗口中可见内容
-
js实现图片无缝滚动特效
首先,无缝滚动的第一个重点就是--动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScript中定时器的相关知识. JS中的创建定时器的方法包括两种:setTimeout和setInterval.首先它们接收的参数相同:第一个参数是一个函数,用于定时器执行,第二个参数是一个数字,代表过多少毫秒之后定时器执行函数.它们的不同在于:setTimeout 是在经过指定的时间之后,只执行一次函数,而setInterval,则是每间隔指定时间,就执行函数一次,说简单点的话,就是setInter
-
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
**兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码(支持左移/右移功能)(本示例为上下两行图片进行双行滚动) **实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆, **通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置, **因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到"无缝&
-
js实现图片无缝滚动
js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单. 主要的是使用js位置知识. 1.innerHTML:设置或获取元素的html标签 2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距 3.offsetWidth:设置或获取指定标签的宽度 4.setInterval():设置方法定时启动 5.clearInterval();清除定时器 效果图: <!DOCTYPE html> <html
-
原生javascript实现图片无缝滚动效果
图片水平无缝滚动效果在大量的网站都有应用,特别是一些企业网站在展示产品的时候,因为是动态效果,所以能够给网站增色不少,相比静态图片展示更能够吸引用户的注意力,下面就通过实例代码介绍一下如何实现此效果. 代码如下: <html> <head> <meta charset="gb2312"> <title>我们</title> <style type="text/css"> #demo{ backg
-
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
本文实例讲述了JS实用技巧.分享给大家供大家参考,具体如下: js屏蔽错误 把下面的代码放在JS脚本中 <script type="text/javascript"> window.onerror = function(){ alert("出现脚本错误"); return true; } alert(b); </script> 注意:定义onerror事件应该在出错之前,否则任然会出现脚本错误 如何防止设置DIV出现滚动条? style=&q
-
Javascript实现图片不间断滚动的代码
蛮优秀的一段效果代码,可以上下左右滚动,收藏了!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=
-
jQuery图片轮播滚动切换代码分享
本文实例讲述了jQuery图片轮播滚动切换特效.分享给大家供大家参考.具体如下: jQuery图片轮播滚动切换代码是一款简单的jquery四张图片轮播滚动切换效果代码,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link rel="stylesheet" type="text/css" h
-
JavaScript实现垂直向上无缝滚动特效代码
一.循环向上滚动的文字,如上面的滚动效果 二.实现的思路 1.建立三个层dome.dome1.dome2 2.垂直滚动的文字在dome1上 3.通过层的滚动来实现文字滚动 三.源代码 <html> <head> <title>循环向上滚动的文字</title> <link href="css/scrollTop.css" rel="stylesheet" type="text/css" /&g
-
JS实现图片无间断滚动代码汇总
本文整理汇总了JavaScript实现图片滚动的常见代码,可以实现向上下左右四个方向的无缝滚动的效果,这是前端设计开发时常用的一个图片特效,你可只用其中的一种滚动效果. 具体的实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="ht
-
常见JS效果之图片减速度滚动实现代码
复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>图片减速度滚动(by rentj1@163.com;)</title> <style> ul{ margin:0; padding:0} ul{ list-style:none;} body{font:12px/1.2 "宋体"; } .
-
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
html里的marqueen也能实现内容的滚动,但滚动是间断的,在滚动一个周期中,会有一段空白出现.如果滚动的区域比较大,空间的出现,会让页面看起来很不美观.运用JavaScript可以使这一问题得到改观,实现无间断的滚动. 上下循环滚动代码: 复制代码 代码如下: <div id="demo" onmouseover="clearInterval(inter)" onmouseout="inter=setInterval(qswhMarquee,3
-
JavaScript 计算图片加载数量的代码
通过JavaScript 来计算当前图片加载的张数. 原理: 先定义一个图片的数组,然后通过image的onload事件来计算,注意,onload在ie和火狐有所不同. 最后需要一个进度条与之结合即可. 这个脚本在做游戏的地方用得比较多. 演示: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.1.单行滚动效果 无标题文档 ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} function AutoScroll(obj){ $(obj).find
-
利用javascript解决图片缩放及其优化的代码
一个客户跟我联系说,刚给他做的网站,显示不正常,我顿时一紧张,这是我独立完成的第一个项目,于是赶紧打开他的网站看了看,没看出什么不正常来.我又问他怎么不正常,他说和交接项目时的效果不一样,晕,交接时要是不正常,项目肯定交接不了啊,干脆让他截个图过来.果然不正常,是他刚上传的一张图片把显示内容的窗口撑开了.查看代码,明明写好了max-width,怎么还会出现这种情况.突然发现他发来的图上,那个浏览器看着不顺眼,像是古老的而神圣的IE6!经过确认,果然是它,又是它!我真是疏忽,没给他在IE6下测试就
-
javascript 获取模态窗口的滚动位置代码
实验了一下午,到现在终于解决的了模态窗口的滚动位置获取办法,现在来分享一下, 其实很简单,给你的弹出模态窗口的div块设置一个id, 在js中通过 document.getElementById('divID').scrollLeft 这样获取的是向右滚动的值 同理,scrollTop 就是向下滚动的值, 其实很简单,那就说到这里