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中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
js定时器的使用(实例讲解)
Jan 06 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 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用函数嵌入网站访问量计数器
2017/10/27 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
2016/05/30 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
vue.js中created方法作用
2018/03/30 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
JS+css3实现幻灯片轮播图
2020/08/14 Javascript
python函数参数*args**kwargs用法实例
2013/12/04 Python
Python Socket编程入门教程
2014/07/11 Python
Python的Django框架下管理站点的基本方法
2015/07/17 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
Python super()函数使用及多重继承
2020/05/06 Python
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
澳洲的服装老品牌:SABA
2018/02/06 全球购物
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
什么是设计模式
2012/06/17 面试题
2014自主招生自荐信策略
2014/01/27 职场文书
留守儿童工作方案
2014/06/02 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
给老婆的保证书
2015/01/16 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书