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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
js 采用delete实现继承示例代码
May 20 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
Vue keep-alive实践总结(推荐)
Aug 31 Javascript
Vue项目history模式下微信分享爬坑总结
Mar 29 Javascript
VsCode里的Vue模板的实现
Aug 12 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 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数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
PHP线程的内存回收问题
2016/07/08 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
判断浏览器的javascript版本的代码
2010/09/03 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
Python算术运算符实例详解
2017/05/31 Python
快速了解Python相对导入
2018/01/12 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
python中pika模块问题的深入探究
2018/10/13 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
python用for循环求和的方法总结
2019/07/08 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
应用服务器有那些
2012/01/19 面试题
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
《故乡》教学反思
2014/04/10 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
2015年客服工作总结范文
2015/04/02 职场文书