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 相关文章推荐
JavaScript类和继承 prototype属性
Sep 03 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
js中document.write的那点事
Dec 12 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
JS 实现随机验证码功能
Feb 15 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
vue点击自增和求和的实例代码
Nov 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
php采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
Angular4 反向代理Details实践
2018/05/30 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
[52:00]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs Optic
2018/04/02 DOTA
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
以Flask为例讲解Python的框架的使用方法
2015/04/29 Python
python创建临时文件夹的方法
2015/07/06 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
python分布式计算dispy的使用详解
2019/12/22 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
python如何查看网页代码
2020/06/07 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
工作时间上网检讨书
2014/02/03 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年平安夜寄语
2014/12/08 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers