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 相关文章推荐
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
JavaScript模块规范之AMD规范和CMD规范
Oct 27 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
May 03 Javascript
js操作二进制数据方法
Mar 03 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 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中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
2014/08/27 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
Django Rest framework解析器和渲染器详解
2019/07/25 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
UGG英国官方网站:UGG UK
2018/02/08 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
毕业生自我鉴定
2013/12/04 职场文书
机电一体化自荐信
2013/12/10 职场文书
18岁生日感言
2014/01/12 职场文书
班级学习计划书
2014/04/27 职场文书
申报材料格式
2014/12/30 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
python之json文件转xml文件案例讲解
2021/08/07 Python
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记