Javascript实现图片不间断滚动的代码


Posted in Javascript onJune 22, 2016

蛮优秀的一段效果代码,可以上下左右滚动,收藏了!!

<!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 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
javascript 用原型继承来实现对象系统
Mar 22 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
js获取上传文件大小示例代码
Apr 10 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
seajs和requirejs模块化简单案例分析
Aug 26 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 #Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 #Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 #Javascript
Json解析的方法小结
Jun 22 #Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 #Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 #Javascript
JS随机打乱数组的方法小结
Jun 22 #Javascript
You might like
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
php生成唯一的订单函数分享
2015/02/02 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
实用自动化运维Python脚本分享
2018/06/04 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
python进阶之自定义可迭代的类
2019/08/20 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
国培计划培训感言
2014/03/11 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书
先进工作者申报材料
2014/12/23 职场文书
店铺转让协议书
2015/01/29 职场文书
课外活动总结
2015/02/04 职场文书
实习班主任自我评价
2015/03/11 职场文书