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获取GridView中用户点击控件的行号,列号
Apr 14 Javascript
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 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学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
cookie的secure属性详解
2015/04/08 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
python模拟enum枚举类型的方法小结
2015/04/30 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
Python实现爬取并分析电商评论
2020/06/19 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
公司财务工作总结的自我评价
2013/11/23 职场文书
财务分析个人的自荐书范文
2013/11/24 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书
java开发双人五子棋游戏
2022/05/06 Java/Android