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 相关文章推荐
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
javascript Ext JS 状态默认存储时间
Feb 15 Javascript
jquery 常用操作方法
Jan 28 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
讨论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 substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
2016/11/07 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
python3中的logging记录日志实现过程及封装成类的操作
2020/05/12 Python
python em算法的实现
2020/10/03 Python
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
机械制造与自动化应届生求职信
2013/11/16 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
特种设备安全管理制度
2015/08/06 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js