Javascript实现滚动图片新闻的实例代码


Posted in Javascript onNovember 27, 2013

下面这段代码是用来实现图片新闻的

var index = 0;
var Timer = null;
function initGallery(){
    for(var i=0; i< 4; i++){
       document.getElementById("fPic"+i).style.display = "none";
       document.getElementById("fTitl"+i).style.display = "none";
       document.getElementById("fNum"+i).style.className = "numOff";
    }
    startChange();
    setTimer();
}
function startChange(){
    index = index % 4;
    changePic(index);
    changeTitl(index);
    changeNum(index);
    index++;
}
function changePic(index){
    for(var i=0; i<4;i++){
        document.getElementById("fPic"+i).style.display = "none";
    }
    document.getElementById("fPic"+index).style.display = "block";
}
function changeTitl(index){
    for(var i=0; i<4; i++){
        document.getElementById("fTitl"+i).style.display = "none";
    }
    document.getElementById("fTitl"+index).style.display = "block";
}
function changeNum(index){
    for(var i=0; i<4; i++){
        document.getElementById("fNum"+i).className = "numOff";
    }
    document.getElementById("fNum"+index).className = "numOff numOn";
}
function clearTimer(){
    this.clearInterval(Timer);
}
function setTimer(){
    Timer = window.setInterval(startChange, 3000)
}
function setIndex(index){
    this.index = index;
    this.startChange();
}
Javascript 相关文章推荐
js压缩利器
Feb 20 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 Javascript
react ant Design手动设置表单的值操作
Oct 31 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
介绍一下28个JS常用数组方法
May 06 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 #Javascript
js替代copy(示例代码)
Nov 27 #Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 #Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 #Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 #Javascript
JS、CSS加载中的小问题探讨
Nov 26 #Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 #Javascript
You might like
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
2016/04/03 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
2017/04/19 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
Sanic框架Cookies操作示例
2018/07/17 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
Python tkinter和exe打包的方法
2020/02/05 Python
如何用python免费看美剧
2020/08/11 Python
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
历史教育专业个人求职信
2013/12/13 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
中学政教处工作总结
2015/08/13 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏
MySQL优化之慢日志查询
2022/06/10 MySQL
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS