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查看html源文件
Nov 08 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
AJAX 网页保留浏览器前进后退等功能
Feb 12 Javascript
浅析创建javascript对象的方法
May 13 Javascript
React实现双向绑定示例代码
Sep 19 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
详解webpack+express多页站点开发
Dec 22 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
js中数组常用方法总结(推荐)
Apr 09 Javascript
使用React代码动态生成栅格布局的方法
May 24 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 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分页思路以及在ZF中的使用
2012/05/30 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
javascript时间函数大全
2014/06/30 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
jQuery的几个我们必须了解的特点
2015/05/03 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
python创建临时文件夹的方法
2015/07/06 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
Python cookbook(数据结构与算法)将名称映射到序列元素中的方法
2018/03/22 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
美国智能家居专家:tink
2019/06/04 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
小学教师的个人自我鉴定
2013/10/24 职场文书
荷叶圆圆教学反思
2014/02/01 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
单位授权委托书范本
2014/09/26 职场文书
黄山导游词
2015/01/31 职场文书
信息简报范文
2015/07/21 职场文书
教学副校长工作总结
2015/08/13 职场文书
网络研修心得体会
2016/01/08 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
Python实现天气查询软件
2021/06/07 Python
MYSQL如何查看进程和kill进程
2022/03/13 MySQL