JS实现的图片循环播放浏览框

最新推荐文章于 2023-02-18 23:17:02 发布
最新推荐文章于 2023-02-18 23:17:02 发布
阅读量3.7k 收藏 3
点赞数
分类专栏： javascript css html 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yeyinglingfeng/article/details/50829116
版权
javascript 同时被 3 个专栏收录
6 篇文章 0 订阅
订阅专栏
html
6 篇文章 0 订阅
订阅专栏
css
4 篇文章 0 订阅
订阅专栏

显现效果如图所示
这里写图片描述

先大体讲下实现的功能
1.首先是每过5000ms，如上所示的图中，三个img控件会进行图片变化，左边的小img控件所显示的是中间img控件所显示图片的上一张图片（相对于文件夹内而言）。右边同理。
所用时间控制的js代码如下

time=5000;
............................
var t2 = window.setInterval("show2()",time);
function show2()
{
............................
}

2.左右两边的img控件做了模糊处理。
所用方式为css控制，css代码如下

.blur {    
    -webkit-filter: blur(10px); /* Chrome, Opera */
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);    
}

3.所用示例图片为4张，所以点击左上方的PNGx字段即可跳转到该图片。
4.点击左右两边的img可以查看上一张or下一张图片。
5.点击中间img控件左右滑动后松开鼠标（类似于手机端的滑动）能够实现4的效果。
6。下方的灰色横线原本打算做成一个滑动条，用来实现拖动跳转图片的，现在还未完成。

以下放上参考代码
jsp代码

<html>
    <head>
        <link href="css/1.css" rel="stylesheet" type="text/css" />
        <meta charset="utf-8"/>
        <title>Image Gallery</title>
        <style>
        .back{
            background-color:#000000;
            }
        </style>
    </head>
    <body class="back">
        <script type="text/javascript" src="js/1.js">
        </script>
        <h1 style="color:#d3d3d3">Snapshots</h1>
        <ul>
            <li>
                <a href="images/1.png" id="PNG1" onclick="show(this);return false;">PNG1</a>
            </li>
            <li>
                <a href="images/2.png" id="PNG2" onclick="show(this);return false;">PNG2</a>
            </li>
            <li>
                <a href="images/3.png" id="PNG3" onclick="show(this);return false;">PNG3</a>
            </li>
            <li>
                <a href="images/4.png" id="PNG4" onclick="show(this);return false;">PNG4</a>
            </li>                                   
        </ul>
        <table border=0 cellpadding=0 cellspacing=0 align="center">
            <tr>
                <td>
                    <div align="right" style="padding-right:20px">
                        <img id="pic1" src="images/3.png" height="160px" class="blur" onclick="show3()"/>
                    </div>
                </td>
                <td>
                    <div style="position:relative;width:567px;height:320px;">
                        <div align="center" style="position:absolute;">
                            <img id="pic" src="images/4.png" alt="my image gallery" height="320px"/>
                        </div>
                        <div align="center" style="position:absolute;height:320px;width:567px;z-index:1" onmousedown="get()" onmouseup="change()">

                        </div>
                    </div>
                </td>
                <td>
                    <div align="left" style="padding-left:20px">
                        <img id="pic2" src="images/1.png" height="160px" class="blur" onclick="show4()"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan=3 width="100%">
                    <div align="center" style="padding-top:30px">
                        <table width="70%">
                            <tr>
                                <td height="15px" style="background-color:#d3d3d3">

                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>



css文件代码 css/1.css

.blur {    
    -webkit-filter: blur(10px); /* Chrome, Opera */
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);    
}



javascript文件代码 js/1.js

            var time=5000;

            function show(whichpic)
            {
                t2=window.clearInterval(t2);
                var s1=whichpic.getAttribute("href");
                var s2=document.getElementById("pic");
                s2.setAttribute("src",s1);
                var s3=whichpic.getAttribute("id");

                i=s3[3]-1;
                if(i==0)
                {
                    i=4;
                }else if(i==-1)
                {
                    i=3;
                }
                show2();
                t2 = window.setInterval("show2()",time);
            }

            var t2 = window.setInterval("show2()",time);
            var i=0;
            function show2()
            {
                if(i==4)
                {
                    i=0;
                }
                i++;
                var s1=document.getElementById("PNG"+i);
                var s2=document.getElementById("pic");
                s2.setAttribute("src",s1);

                var j=i-1;
                if(j==0)
                {
                    j=4;
                }
                s1=document.getElementById("PNG"+j);
                s2=document.getElementById("pic1");
                s2.setAttribute("src",s1);

                j=i+1;
                if(j==5)
                {
                    j=1;
                }
                s1=document.getElementById("PNG"+j);
                s2=document.getElementById("pic2");
                s2.setAttribute("src",s1);
            }  

            function show3()
            {
                t2=window.clearInterval(t2);
                if(i>=2)
                {
                    i=i-2;
                }else if(i==1)
                {
                    i=3;
                }else
                {
                    i=2;
                }
                show2();
                t2 = window.setInterval("show2()",time);
            }
            function show4()
            {
                t2=window.clearInterval(t2);
                show2();
                t2 = window.setInterval("show2()",time);
            }

            var x,y;
            function get()
            {
                e=arguments[0]||window.event;
                x=e.clientX;
                y=e.clientY; 
            }
            function change()
            {
                e=arguments[0]||window.event;
                x=e.clientX-x;
                y=e.clientY-y;
                if(x<0)
                {
                    show3();
                } else
                {
                    show4();
                }
            }

关于图片就不放上来了，按照上面的文件结构，在jsp所在文件夹中新建image文件夹（js,css文件夹也放在jsp所在文件夹中），里面放上图片，修改下名字即可使用。

团子ing
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
《程序天下：JavaScript实例自学手册》光盘源码
02-08
第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错原因 1.9 当前网页调用其他网页 1.10 倒计时载入页面 1.11 定义网页的关键字 1.12 进入页面同时弹出欢迎对话框 1.13 禁止网页另存 1.14 禁止页面加入缓存 1.15 离开页面时弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用登录按钮 2.3 动态创建按钮 2.3 平面按钮 2.4 按钮的嵌入效果 2.5 按钮改变状态栏信息 2.6 定义按钮的热键 2.7 取得控件的绝对位置 2.8 删除时的确认提示 2.9 按钮只能单击一次 2.10 防止按钮连击 2.11 图片式按钮 2.12 文字显示在按钮底部 2.13 选择不同的列表项就显示不同的按钮 2.14 使用按钮控制文本渐变 2.15 翻页效果的公告栏 2.16 动态设置控件的事件 第3章 字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量 3.11 判断字符串中有多少汉字 3.12 去除字符串的前后空格 3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 文本框的自动全选 3.16 文本框滚动导航 3.17 按钮获取焦点 3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 3.27 黑客帝国中的字符下落效果 3.28 获取表单中文本框的个数 3.29 光标停在文字最后 3.30 分行取textarea中的值 3.31 自动插入文本 3.32 选取textarea的指定行 3.33 文本放大镜 3.34 文本框的默认输入法 3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤SQL注入字符 3.44 textarea内实现行的翻页效果 3.45 textarea中的文本插入 3.46 查找两段文本中相同的词句 3.47 自动保存网页输出的文本 3.48 文本编辑器 第4章 鼠标特效 4.1 禁用鼠标右键 4.2 使鼠标滚轮失效 4.3 状态栏显示鼠标位置 4.4 点击鼠标右键到指定页 4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 图片跟随鼠标 4.14 围绕鼠标的文本 4.15 鼠标旁边的提示信息 4.16 鼠标移到下拉框时自动全部打开 4.17 checkbox鼠标移入移出的特效 第5章 层和框架的特效 5.1 div层提示效果 5.2 层自动滚动到最底端 5.3 div的自动滚动 5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 下拉框式网站导航 6.14 综合的搜索引擎 6.15 经典的ListView列表框 第7章 键盘操作和状态栏特效 7.1 按功能键返回首页 7.2 回车实现Tab键功能 7.3 Ctrl+Enter提交数据 7.4 IE中屏蔽退格建（Back Space） 7.5 屏蔽键盘所有键 7.6 JavaScript捕获方向键 7.7 状态栏变化信息 7.8 状态栏的跑马灯效果 7.9 状态栏缩放文字 7.10 状态栏文字来回出现 7.11 交替闪烁的状态栏 7.12 状态栏的分解显示文本特效 7.13 状态栏文字从右弹出 7.14 状态栏中文字从中间分开显示 7.15 屏蔽掉IE自带的功能键 第8章 链接特效 8.1 关闭窗口的链接 8.2 不用CSS实现链接样式的变化 8.3 让链接没有下划线 8.4 去掉超链接点击时的框 8.5 显示页面中所有链接 8.6 一个链接打开两个地址 8.7 为链接提供下拉菜单 8.8 按钮链接 8.9 弹出鼠标所指的链接地址 8.10 链接的注释 8.11 为超链接同时绑定单击和双击事件 8.12 带链接的滚动字幕 8.13 会跳舞的链接 8.14 检测站点的连接速度 8.15 文本链接的渐变效果 第9章 表格特效 9.1 用table做的镜框 9.2 全自动单元格 9.2 突出的表格 9.3 让表格有提示信息 9.4 闪亮的表格边框 9.5 表格的宽度固定后内容自动换行 9.6 表格的排序 9.7 表格的斜线 9.8 table中的文字滚动 9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 9.13 单击表头实现表格排序 9.14 单击单元格显示行的详细信息 9.15 表格设置为“100%”时获取表格的宽度 9.16 表格选中后变色 9.17 表格中隐藏下级表格 9.18 表格自动下移 9.19 动态创建固定列数的表格 9.20 动态改变表格列宽 9.21 动态改变表格的行顺序 9.22 动态生成包含合并单元格的表格 9.23 用键盘上下键实现表格行的上下选择 9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的交替行颜色 9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript向表格中写入数据 9.37 类C# GridView的编辑效果（一） 9.38 类C# GridView的编辑效果（二） 第10章 单选框和复选框 10.1 选择了哪一个单选框 10.2 单击文字实现单选框的选定 10.3 被选中的复选框求和 10.4 复选框组选 10.5 复选框分组全选 10.6 复选框和文本框的联动效果 10.7 单击任意单元格都能自动选中复选框 10.8 调用复选框后面的文字 10.9 两个checkbox互斥问题 10.10 使用checkbox控制文本框 10.11 选中表格行前的复选框则行变色 10.12 用JavaScript生成面包屑导航 10.13 复选框的反选 10.14 选中所有复选框 10.15 复选框全选（二） 10.16 改变slsect选中项的颜色特效 第11章 颜色处理和菜单特效 11.1 背景颜色测试 11.2 RGB颜色在线转换 11.3 颜色切换板 11.4 下拉菜单 11.5 左键弹出式菜单 11.6 目录样式的下拉菜单 11.7 网页中的选项卡 11.8 静态导航菜单 11.9 烟花效果的下拉菜单 11.10 网络导航条 11.11 隐藏式菜单 11.12 仿flash菜单 11.13 滚动导航菜单 11.14 幻灯片式的导航菜单 11.15 类似QQ的菜单 11.16 三级联动菜单 11.17 三级联动菜单 11.18 树型目录菜单 第12章 窗口特效与弹出式警告 12.1 无关闭按钮的窗口 12.2 鼠标控制窗口开关 12.3 使窗口只第一次访问时弹出 12.4 禁止弹出警告框 12.5 关闭窗口不提示的方法 12.6 关闭窗口时的提示 12.7 定时弹出窗口 12.8 调整窗口的大小 12.9 打开的窗口居中 12.10 打开窗口的等待提示 12.11 在打开的窗口中返回数据 12.12 创建弹出窗口 12.13 不允许窗口出现滚动条 12.14 页面打开的同时打开另外两个窗口 12.15 慢慢变大的窗口 12.16 设置新打开的窗口为活动窗口 12.17 页面随窗口的改变而改变 12.18 幻灯片式弹出窗口 12.19 弹出窗口生成器 12.20 关不掉的警告框 12.21 循环的警告框 12.22 屏蔽状态栏的错误提示 12.23 获取模式窗口的值 第13章 日期和时间特效 13.1 指定时间关闭页面 13.2 最简单的时间日期特效 13.3 最简单的获取时间的方法 13.4 随日期变换的文本 13.5 输入框的默认值为今天 13.6 时间相加 13.7 5秒后消失的广告 13.8 12小时制和24小时制的转换 13.9 标题栏显示时间 13.10 超过时间页面自动跳转 13.11 分时段问候用户 13.12 获取服务器时间 13.13 倒计时显示 13.14 背景时钟 13.15 计算某天星期几 13.16 计算时间差 13.17 计算网页停留时间 13.18 记录页面的修改时间 13.19 将日期转换为字符串的方法 13.20 检测是否是闰年 13.21 年份加减函数 13.22 精确到千分之一秒 13.23 离开某天的时间 13.24 判断两个字符串日期的大小 13.25 显示登录时间 13.26 中文日期样式(一) 13.27 中文日期样式(二) 13.28 状态栏动态显示时间 13.29 页面访问时间限制 13.30 显示英文上、下午的时间 13.31 用JavaScript制作的特色时钟 13.32 自定义的日历 13.33 生日提醒器 13.34 时间的倒影 13.35 使用正则表达式验证日期 13.36 全面的日期选择功能 13.37 全球的时间查看表 13.38 无刷新定时取数据 13.39 取当月的最后一天 第 14章 数字、数组和统计函数特效 14.1 边打字边显示字数 14.2 创建随机数 14.3 JavaScript创建二维数组 14.4 截断小数点位数 14.5 删除数组中指定元素 14.6 数字选中后放大 14.7 统计字符数的方法 14.8 JavaScript遍历数组 14.9 获取字符串型数组下标的数组长度 14.10 用JavaScript实现数组排序 14.11 数字千分位函数 14.12 读写Cookie的函数 14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 14.17 同一用户的来访统计 14.18 十六进制转换为十进制 14.19 将URL转化为16进制 14.20 小写金额转换为大写 14.21 通过两点坐标计算直线距离 14.22 随机抽取彩票 14.23 实时计算折扣 14.24 实用计算器 14.25 前面补0的方法 第15章 图形、图像的特效 15.1 图片变形效果 15.2 图像的翻转效果 15.3 图像的模糊效果 15.4 图像的水印效果 15.5 图形淡出淡隐 15.6 图像的渐隐播放效果 15.7 文字环绕图片 15.8 切换图片的特殊效果 15.9 晃动的图片 15.10 定时消失的图片 15.11 QQ图像一闪一闪的效果 15.12 设置textarea中的图片不处于编辑状态 15.13 禁止图像的拷贝 15.14 LOGO像雪花一样落下 15.15 多幅图片分页滚动显示 15.16 循环滚动显示图片 15.17 图片的选择展示 15.18 163图片新闻切换效果 15.19 判断上传图片的大小 15.20 上传图片时预览 15.21 对联广告 15.22 带关闭的对联广告 15.23 到边界反弹的漂浮图片 15.24 用键盘控制图片移动 15.25 预装载图片提高站点速度 15.26 始终在屏幕右下角的图片 15.27 可拖动的图片 15.28 等比例缩略图 15.29 用JavaScript导出图像到Excel 15.30 使用VML打造可改变大小的圆框 15.31 JavaScript实现文档结构图 15.32 判断一副图片是否加载完毕 第16章 页面数据的验证 16.1 验证字符串是否全由数字组成 16.2 验证表单项必须填写 16.3 判断用户输入是否为中文 16.4 验证列表框中的值是否重复 16.5 检测输入框的统一方法 16.6 Email的验证 16.7 不使用正则验证IP地址 16.8 IP地址输入框 16.9 判断变量是否已经定义 16.10 判断方法是否已经定义 16.11 表单验证样式（一） 16.12 判断表单是否已修改 16.13 判断控件的类型 16.14 密码强度检查 16.15 身份证的验证 16.16 JavaScript生成验证码 16.17 JavaScript生成验证码(二) 第17章 进度条、滚动条特效处理 17.1 使用符号制作的进度条 17.2 用table制作的进度条 17.3 CSS+JS制作的进度条（一） 17.4 CSS+JS制作的进度条（二） 17.5 进度条形式的下载效果 17.6 滑动条（一） 17.7 滑动条（二） 17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码（二） 18.3 在线测试代码（三） 18.4 多选考试题 18.5 在线心理测试脚本 18.6 电脑检测健康情况 第19章 文件处理和打印的技巧 19.1 判断上传文件的类型 19.2 改变上传文件控件的样式 19.3 上传文件一次完成 19.4 使用正则判断文件扩展名 19.5 多附件上传效果 19.6 上传控件内容清空 19.7 textarea显示记事本文件的内容 19.8 使用FSO读写文本文件 19.9 自动启动文件下载 19.10 创建Excel文件 19.11 JavaScript导出数据到Excel 19.12 JavaScript读取自身文件内的XML 19.13 将XML文件绑定到table 19.14 使用JavaScript加载XML文件 19.15 动态加载JavaScript文件 19.16 防止JavaScript文件被其他站直接引用 19.17 检查机器是否安装Word 19.18 打印当前页 19.19 打印预览 19.20 隐藏不想打印的页面内容 19.21 使用ExecWB直接打印 19.22 动态绑定XML文件 19.23 Kill Excel的进程 第20章 调用操作系统的应用 20.1 Javascript操作剪贴板 20.2 打开硬盘驱动器 20.3 单击加入收藏夹 20.4 复制标题和网址 20.5 关闭输入法 20.6 检测屏幕分辨率 20.7 检测系统信息 20.8 显示本地计算机信息 20.9 检测浏览器浏览过的站点数 20.10 IE文件菜单中的打开命令 20.11 打开Internet选项对话框 20.12 打开Windows系统的画板 20.13 弹出保存对话框 20.14 进入页面弹出收藏夹 20.15 执行客户端的可执行程序 20.16 自动调用OutLook发送邮件 20.17 弹出窗口选择颜色 20.18 弹出框式邮件发送 20.19 把网站作为用户的Active桌面 20.20 判断是否安装了flash插件 第21章 流行技术：DOM和userData的应用技巧 21.1 使用userData保存文本内容 21.2 使用userData保存select标记 21.3 使用userData保存checkbox标记 21.4 使用DOM实现控件的替换 21.5 使用DOM实现控件的复制 21.6 使用DOM判断页面中控件是否嵌套 21.7 使用DOM获取页面中某控件的属性 21.8 将某行排在表格的最后 21.9 动态删除页面中的元素 21.10 克隆表格 21.11 拖动表格行改变顺序 21.12 表格操作常用方法 第22章 流行应用：AJAX和Property的应用技巧 22.1 实现关机效果的界面 22.2 关机特效（二） 22.3 评星效果 22.4 输入框自动完成功能 22.5 Ajax效果的字符串过滤 22.6 Gmail右上角的Loading效果 22.7 使用XMLHTTP获取天气预报 22.8 拖拽任意对象 22.9 避免打开无效页面 22.10 用JavaScript调用Google AdSense 22.11 Ajax效果：可拖拽的表格 22.12 JavaScript调用Web Service 22.13 用JavaScript实现编码解码 22.14 创建带属性的对象 22.15 用prototype实现JavaScript的继承 22.16 JavaScript制作哈希表 第23章 其他技巧及特效 23.1 最简单的漂移特效 23.2 JavaScript遍历对象中的所有属性 23.3 QQ在线客服 23.4 查看网站的排名 23.5 定义全局变量 23.6 动态生成金字塔效果 23.7 动态修改CSS的样式 23.8 根据浏览器不同设置CSS 23.9 汉字按拼音排序 23.10 划词搜索 23.11 加载大量input控件的快速方法 23.12 简繁体转换 23.13 将HTML转换为JavaScript脚本 23.14 脚本永不出错 23.15 进入网站的签名程序 23.16 浏览器毁灭者 23.17 罗列对象的属性和值 23.18 密码保护页 23.19 全角转半角 23.20 全屏广告 23.21 输入的英文自动全大写 23.23 特殊扩散效果 23.24 提交信息等待界面 23.25 同时调用两个方法 23.26 自定义错误处理样式 23.27 FTP网站登录
JavaScript应用177例
07-02
实例代码： 第1章（\cha01） 1.1.htm 自动类型转换 1.2.htm 显式类型转换 1.3.htm 提升基本类型为对象 第2章（\cha02） 2.1.htm if语句 2.2.htm switch语句 2.3.htm while循环 2.4.htm do-while循环 2.5.htm for循环 第3章（\cha03） 3.1.htm 遍历数组元素 3.2.htm 改变数组元素 3.3.htm 用对象的方式实现数组 3.4.htm 将数组转换为字符串 3.5.htm 操作数组元素 3.6.htm 实现多维数组 第4章（\cha04） 4.1.htm 求平方根 4.2.htm 求质数 4.3.htm 简单数制转换 4.4.htm 数制转换函数 4.5.htm 实现计算器 第5章（\cha05） 5.1.htm 带开关的时钟 5.2.htm 不同风格的时间显示 5.3.htm 倒计时效果 5.4.htm 模拟时钟 5.5.htm 显示农历日期 5.6.htm 温度计样式时钟 5.7.htm 位置固定的时钟 第6章（\cha06） 6.1.htm HTML事件绑定 6.2.htm 非标准事件绑定 6.3.htm 事件处理器绑定 6.4.htm 使用函数 6.5.htm 直接在表单上调用事件 第7章（\cha07） 代码说明：本章代码只能在Mozilla Firefox中运行。 7.1.htm 事件流 7.2.htm DOM2鼠标事件 7.3.htm 取消默认动作 7.4.htm 创建DOM2事件 第8章（\cha08） 8.1.htm 页面预览 8.2.htm 图像切换 8.3.htm 点亮文本 8.4.htm 鼠标跟随 8.5.htm 鼠标感应 8.6.htm 禁用鼠标按键 第9章（\cha09） 9.1.htm 文字的垂直滚动 9.2.htm 文字的渐隐渐显 9.3.htm 文字的闪烁显示 9.4.htm 文字的随意拖动 9.5.htm 文字的坠落显示 9.6.htm 页面内飘动的文字 9.7.htm 漫天飞舞的文字 9.8.htm 文字下落效果 第10章（\cha10） 10.1.htm 霓虹灯文字 10.2.htm 色彩渐变 10.3.htm 文字的渐大渐小 10.4.htm 文字大小动态变化 10.5.htm 文字变色显示 10.6.htm 打字效果显示 第11章（\cha11） 代码说明：代码11.6.htm需要IE5.5或以上版本支持 11.1.htm 随机显示 11.2.htm 打字效果 11.3.htm UBB代码实例 11.4.htm 从右至左排列的文字 11.5.htm 古汉语文字排版 11.6.htm 蒙古族文字排版 第12章（\cha12） 12.1.htm 文档颜色设置 12.2.htm 上次修改时间 12.3.htm DOM 1中的文档属性与聚集 12.4.htm 访问HTML元素属性 第13章（\cha13） 13.1.htm 按位置访问元素 13.2.htm 按名称访问元素 13.3.htm 动态修改元素内容 13.4.htm 改变的内容 13.5.htm 改变页面样式 第14章（\cha14） 14.1.htm 节点插入与追加 14.2.htm 节点复制 14.3.htm 节点删除与替换 14.4.htm 修改节点内容 第15章（\cha15） 15.1.htm HTML中的表格 15.2.htm 设置表格属性 15.3.htm 操作表格元素 15.4.htm 操作表元 第16章（\cha16） 16.1.htm 验证输入内容是否为空 16.2.htm 验证E-mail地址 16.3.htm 电话号码检测 第17章（\cha17） 17.1.htm 混合表单验证 17.2.htm onchange事件 17.3.htm 按键屏蔽 第18章（\cha18） 18.1.htm 打开窗口 18.2.htm 关闭窗口 18.3.htm 窗口写入 18.4.htm 窗口交互 18.5.htm 提示与警告对话框 第19章（\cha19） 19.1.htm 窗口移动 19.2.htm 改变大小 19.3.htm 窗口滚动 19.4.htm 设置超时 19.5.htm 窗口事件 19.6.htm IE窗口扩展 第20章（\cha20） 20.1.htm 访问框架 20.2.htm 内联框架 20.3.htm 框架间的交叉通信 20.4.htm 嵌套框架交叉通信 第21章（\cha21） 21.1.htm 图片的随机显示 21.2.htm 图像显隐 21.3.htm 图像滚动显示 21.4.htm 探照灯扫描 21.5.htm 多幅图像翻页显示 21.6.htm 水纹效果显示 21.7.htm 全景图效果 21.8.htm 手电效果 21.9.htm 雷达显示效果 第22章（\cha22） 22.1.htm 图像拖动 22.2.htm 按钮控制 22.3.htm 感应鼠标 22.4.htm 花环效果 22.5.htm 流星效果 22.6.htm 图像运动 22.7.htm 图像显示 22.8.htm 图像飞行一 22.9.htm 图像飞行二 第23章（\cha23） 23.1.htm 随机更换页面背景 23.2.htm 用户自选背景之一 23.3.htm 用户自选背景之二 23.4.htm 用户自选背景之三 23.5.htm 页面背景的闪电效果 第24章（\cha24） 24.1.htm 有图像的Media Player 24.2.htm 无图像的Media Player 24.3.htm 有图像的RealPlayer 24.4.htm 无图像的RealPlayer 24.5.htm 播放Flash文件 第25章（\cha25） 25.1.htm 位置固定的对联广告 25.2.htm 随页面滚动的对联广告 25.3.htm 全屏飘动的广告 25.4.htm 循环滚动的多幅广告 25.5.htm 漂浮3D广告 第26章（\cha26） 26.1.htm 基本的下拉菜单 26.2.htm 改进的下拉菜单 26.3.htm 渐显的下拉菜单 第27章（\cha27） 27.1.htm 折叠菜单 27.2.htm 远程菜单 27.3.htm 弹出菜单 第28章（\cha28） 28.1.htm 旋转导航菜单 28.2.htm 隐藏滑动菜单 28.3.htm 仿QQ菜单 28.4.htm 触发型导航菜单 28.5.htm 下拉列表菜单 28.6.htm 树型导航菜单 28.7.htm 变色标题菜单 第29章（\cha29） 29.1.htm 获取文本框中的内容 29.2.htm 显示和修改文字内容（DHTML） 29.3.htm 处理网页表格内容（DHTML） 29.4.htm 显示和修改网页内容（W3C） 29.5.htm 处理网页表格内容（W3C） 29.6.htm 综合应用 第30章（\cha30） 30.1.htm 显示浏览器名称与版本 30.2.htm JavaScript检测 30.3.htm 获取浏览器窗口大小 30.4.htm 设置屏幕对象的尺寸 30.5.htm 有选择地显示图片 30.6.htm 简单的性能检测 30.7.htm 模拟浏览器菜单 第31章（\cha31） 31.1.htm 实现md5加密 31.2.htm 编制自己的加密算法 第32章（\cha32） 代码说明：本章代码都具有一定危害性，可按照页面提示进行操作。 32.1.htm 字符串翻倍 32.2.htm 函数循环交叉调用 32.3.htm 无限递归调用 32.4.htm 构造无限数组 32.5.htm 载入超大图像 32.6.htm 关不掉的对话框 32.7.htm 一直弹出新窗口 第33章（\cha33） 代码说明： 1.代码33.1.htm须使用IE浏览器打开 2.代码33.2.htm须使用Mozilla Firefox浏览器打开 33.1.htm 使用IE处理XML 33.2.htm 使用Mozilla处理XML 33.3.htm XML文件内容分页显示 第34章（\cha34） 34.1.htm 格式化输出 34.2.htm 动态增删记录 第35章（\cha35） 代码说明： 1.对于代码35.1.htm，使用Mozilla Firefox浏览器可直接运行，如果使用IE浏览器，需要在服务器端运行。 2.对于代码35.2.html，需要IIS+PHP+MySQL或Apache+PHP+MySQL环境支持 35.1.htm 读取XML文档 35.2.html 实现联动选择 35.3.htm 实现菜单特效 第36章（\cha36） 代码说明： 1.代码36.1.index.php需要IIS+PHP环境或Apache+PHP环境支持 2.代码Default.aspx需要IIS+ASP.net环境支持 \36.1\ 36.1.index.php 实现简单相册 \36.2\ Default.aspx 实现文本聊天室
程序天下:JavaScript实例自学手册
07-08
第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错原因 1.9 当前网页调用其他网页 1.10 倒计时载入页面 1.11 定义网页的关键字 1.12 进入页面同时弹出欢迎对话框 1.13 禁止网页另存 1.14 禁止页面加入缓存 1.15 离开页面时弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以频道模式打开页面 1.19 自动识别网页类型 1.20 在网页中动态添加Script脚本 1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用登录按钮 2.3 动态创建按钮 2.3 平面按钮 2.4 按钮的嵌入效果 2.5 按钮改变状态栏信息 2.6 定义按钮的热键 2.7 取得控件的绝对位置 2.8 删除时的确认提 示 2.9 按钮只能单击一次 2.10 防止按钮连击 2.11 图片式按钮 2.12 文字显示在按钮底部 2.13 选择不同的列表项就显示不同的按钮 2.14 使用按钮控制文本渐变 2.15 翻页效果的公告栏 2.16 动态设置控件的事件 第3章 字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 控制两个文本框只输其一 3.9 判断编辑器中是否包含特殊字符 3.10 判断文本中回车的数量 3.11 判断字符串中有多少汉字 3.12 去除字符串的前后空格 3.13 刷新时清空所有文本框 3.14 随意改变大小的文本框 3.15 文本框的自动全选 3.16 文本框滚动导航 3.17 按钮获取焦点 3.18 文本框获取焦点弹出下拉框 3.19 文本框简单的单击效果 3.20 文字的打字效果 3.21 文字滚动 3.22 文字滑动 3.23 文字跳动特效 3.24 荧光效果的文本 3.25 文字逐个闪亮-霓虹灯效果 3.26 旋转式的变色文字特效 3.27 黑客帝国中的字符下落效果 3.28 获取表单中文本框的个数 3.29 光标停在文字最后 3.30 分行取textarea中的值 3.31 自动插入文本 3.32 选取textarea的指定行 3.33 文本放大镜 3.34 文本框的默认输入法 3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最顶端的文本 3.43 JavaScript过滤SQL注入字符 3.44 textarea内实现行的翻页效果 3.45 textarea中的文本插入 3.46 查找两段文本中相同的词句 3.47 自动保存网页输出的文本 3.48 文本编辑器 第4章 鼠标特效 4.1 禁用鼠标右键 4.2 使鼠标滚轮失效 4.3 状态栏显示鼠标位置 4.4 点击鼠标右键到指定页 4.5 鼠标放到图片上会显示另外一张图片 4.6 鼠标形状定义大全 4.7 鼠标移入移出时颜色变化 4.8 跟随鼠标的文字 4.9 跟随鼠标的彩色文字 4.10 跟随鼠标的魔法文字 4.11 跟随鼠标的星星 4.12 跟随鼠标的旋转背景 4.13 图片跟随鼠标 4.14 围绕鼠标的文本 4.15 鼠标旁边的提示信息 4.16 鼠标移到下拉框时自动全部打开 4.17 checkbox鼠标移入移出的特效 第5章 层和框架的特效 5.1 div层提示效果 5.2 层自动滚动到最底端 5.3 div的自动滚动 5.4 div的折迭效果 5.5 圆角div 5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不能再选 6.4 不带滚动条的select 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序
纯js实现轮播图
wxCSDN1997的博客
01-24 588
分为两种情况 1：缩略图正好铺满容器 （以五张为例） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca.
JS canvas绘制进度条
XF Android专栏
01-30 435
通过Cavans可以绘制自己想要的东西，在早之前，通过Canvas播放视频，绘制图片，绘制banner图等，复杂点可以用来做数据的防盗窃等，譬如文章预览等，今天分析两个简单的实例，绘制圆形进度条和条形进度条
js实现图片连续滚动播放
qq_40261601的博客
02-18 3220
图片连续滚动播放效果
Js-带进度条的轮播图
andanghui2862的博客
09-25 818
带进度条的轮播图--原生JS实现 实现了图片自动轮播，左右按钮实现图片左右转换，下方原点或者缩小图点击选择其中的某一张图片，然后有红条实现图片的进度。 <div class="content"> <div class="box1"> <ul class="box1_1"> ...
使用js循环播放图片
Grit_ICPC的博客
09-06 806
var curIndex = 0; var timeInterval = 2000; var arr = new Array(); arr[0] = "01.jpg"; arr[1] = "02.jpg"; arr[2] = "03.jpg"; arr[3] = "04.jpg"; this.setInterval(changeImg,timeInterval); function
js图片自动循环播放
热门推荐
qq_26445509的博客
05-24 1万+
js图片自动循环播放 1.实现图片自动循环播放; 2.单击数字按钮时跳转对应图片; 3.左一张，右一张按钮单击时，显示相应的图片;
js实现图片循环播放
の原為じ簡單
06-03 587
脚本 [code="java"] [/code] 表现 [code="java"] nextAd() [/code]
图片循环自动播放js
10-23
新建一个html文件和div层用于需要显示的地方，引入该脚本可自动播放图片，具有播放 暂停功能。
可以循环播放图片的js脚步
07-06
这是一个调理清晰的javascript代码，用来展示图片循环播放代码，下载后需要指定播放的图片，然后用浏览器就可以播放了！
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
29.jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30.jquery实现图片可拖动展示的实例下载 31.jQuery实现拖动滚动条的缩略图排列插件下载 32.jQuery实现焦点图片Flash自动平滑渐变效果 33....
vc++ 应用源码包_1
09-15
详细演示了HtmlView的使用与HtmlView事件站点拦截的实现、js调用。 CIVStringSet_Demo 自定义了一个类似STL容器的类，并进行了测试。 ClearHistory 实现了 清楚internet临时文件、Cookie的清除、游览器地址栏历史...
实现在父页面不刷新情况下显示子页面传递的信息
404 Not Found
07-12 2343
最近在所做的项目中遇到了如下的情况：由于用户需求特殊，所以公司所封装的标签不符合，需要开发人员自定义一个标签来实现数据的查询。 主要功能为在父页面点击该标签中的一个图片按钮时，会打开一个新的子页面，在子页面中查询到需要的信息后将信息返回到父页面，且父页面不进行刷新。 由于父页面不能够进行刷新操作，所以我所常用的使用action方式进行页面传值的方式就不能用了（如果有大触能够使用该方式满足条件的传
JS实现的类照片墙图片展示栏&图片循环播放栏
404 Not Found
03-09 1662
首先效果图如下 所实现的功能介绍: 1.图一中上半部分的图片循环播放栏由4个img标签组成，能够循环播放images文件夹下的图片；因为和上一篇文章中的功能差不多，也就不多说了，这次主要是简化了下代码。 2.图一下半部和图2中的效果，姑且称为照片墙类吧，主要实现方式是下面这个属性:css -webkit-transform:rotate(7deg);使应用该css的标签顺时针旋转7度。同
html标签的简单介绍和使用2
404 Not Found
08-04 923
表单的简单应用效果 html代码<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> hello </title> </head> <body> <for
html标签的简单介绍和使用3
404 Not Found
08-04 525
1.列表<dl> <!--列表范围--> <dt>hello world</dt> <!--上层内容--> <dd>hello java</dd> <!--下层内容--> <dd>hello html</dd> <!--下层内容--> <dd>hello css</dd> <!--下层内容-
js实现图片从右到左循环播放
最新发布
06-01
你可以通过设置图片的定位和动画来实现图片从右到左循环播放的效果。具体实现方法如下： 1. 首先，你需要将图片设置为绝对定位，然后将其右边缘与父元素的右边缘对齐，这样图片就会始终出现在父元素的最右边。 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值