Javascript實(shí)現(xiàn)圖片不間斷滾動的代碼
更新時(shí)間：2016年06月22日 10:47:57 作者：穆乙
這篇文章主要分享一段js圖片不間斷滾動的代碼,蠻優(yōu)秀的,需要的朋友可以參考下。
蠻優(yōu)秀的一段效果代碼，可以上下左右滾動，收藏了！！
<!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 目標(biāo)對象 如:demo,deml1,demo2 中的"demo" 可任意，只要不重復(fù)
*
* @para speed 滾動速度 越大越慢
*
* @para direction 滾動方向 包括:left,right,down,up
*
* @para objWidth 總可見區(qū)域?qū)挾?
*
* @para objHeight 總可見區(qū)域高度
*
* @para filePath 存放滾動圖片的路徑 (如果是自動獲取文件夾里的圖片滾動)
*
* @para contentById 對某id為contentById下的內(nèi)容進(jìn)行滾動 此滾動與filePath不能共存請注意
*
* @para 用法實(shí)例 scrollObject("res",50,"up",470,200,"","resource") 對contentById(resource)下內(nèi)容進(jìn)行滾動
*
* @para 用法實(shí)例 scrollObject("res",50,"up",470,200,"d:\\images\\","") 對filePath(images)下內(nèi)容自動獲取并進(jìn)行滾動,目前只支持ie
*/
var $ =function(id){return document.getElementById(id)}
// 滾動
function scrollObject(obj,speed,direction,objWidth,objHeight,filePath,contentById)
{
// 執(zhí)行初始化
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' >";
// 此處是放要滾動的內(nèi)容
_html+="</td>";
_html+="<td nowrap='nowrap' id='"+obj+"2' ></td>";
_html+="</tr>";
_html+="</table>";
_html+="</div>";
return _html;
}
// 上下滾動的結(jié)構(gòu)
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' >";
// 此處是放要滾動的內(nèi)容
_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$/; //驗(yàn)證文件夾文件是否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();
}
}
// 重復(fù)執(zhí)行
var myMarquee=setInterval(swichDirection,speed);
// 鼠標(biāo)懸停
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>
以上就是本文的全部內(nèi)容，了解更多JavaScript的語法，大家可以查看：《JavaScript 參考教程》、《JavaScript代碼風(fēng)格指南》，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- javascript實(shí)現(xiàn)圖片左右滾動效果【可自動滾動，有左右按鈕】
- js實(shí)現(xiàn)按鈕控制帶有停頓效果的圖片滾動
- JavaScript代碼實(shí)現(xiàn)圖片循環(huán)滾動效果
- JS實(shí)用技巧小結(jié)(屏蔽錯(cuò)誤、div滾動條設(shè)置、背景圖片位置等)
- JS實(shí)現(xiàn)圖片的不間斷連續(xù)滾動的簡單實(shí)例
- 原生javascript實(shí)現(xiàn)圖片無縫滾動效果
- js實(shí)現(xiàn)圖片無縫滾動特效
- js實(shí)現(xiàn)圖片無縫滾動
- JS圖片左右無縫隙滾動的實(shí)現(xiàn)(兼容IE,Firefox 遵循W3C標(biāo)準(zhǔn))
相關(guān)文章
js實(shí)時(shí)計(jì)算字?jǐn)?shù)提醒的文本框
那天在一個(gè)論壇上看到一個(gè)相當(dāng)有意思的功能，就是在文本框中輸入字符的時(shí)候，旁邊會提示還可以輸入多少個(gè)字。2010-07-07
從阿里媽媽發(fā)現(xiàn)的幾個(gè)不錯(cuò)的表單驗(yàn)證函數(shù)
從阿里媽媽發(fā)現(xiàn)的幾個(gè)不錯(cuò)的表單驗(yàn)證函數(shù)...2007-09-09
在textarea中屏蔽js的某個(gè)function的javascript代碼
在textarea中屏蔽js的某個(gè)function的javascript代碼...2007-04-04
javascript中input中readonly和disabled區(qū)別介紹
javascript中input中readonly和disabled區(qū)別，在開發(fā)中可能會常有用到，利用js動態(tài)改變input的屬性2012-10-10
在ie6中對于<input type="file" />通過obj.value是可以獲取客戶端選擇文件的全路徑的，但是到ie7就只能獲取文件名，這對于onchange事件立即顯示圖片會有問題，可以用js方法解決2009-12-12
讓textarea控件的滾動條怎是位與最下方...2007-04-04
好像見過類似的效果，用JS控制單選框，從而改變某鏈接的網(wǎng)址，根據(jù)用戶的選擇返回給不同的鏈接地址，鏈接的錨文字不會變，鏈接地址卻默默的變化了，點(diǎn)擊運(yùn)行看一下效果吧。2009-10-10
JS多級連動菜單...2007-01-01
java編程自寫一款JavaScript超實(shí)用表格插件
這篇文章主要為大家介紹了用java編程來寫一款JavaScript表格插件，非常的使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2021-10-10
如何限制在一個(gè)表格里面禁止使用右鍵...2006-10-10