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实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
JavaScript的代码编写格式规范指南
Dec 07 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
angular1配合gulp和bower的使用教程
Jan 19 Javascript
JSONP原理及应用实例详解
Sep 13 Javascript
ajax跨域访问遇到的问题及解决方案
May 23 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 数组入门教程小结
2009/05/20 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
JS重载实现方法分析
2016/12/16 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
python实现rsa加密实例详解
2017/07/19 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
web字体加载方案优化小结
2019/11/29 HTML / CSS
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
财务主管自我鉴定
2014/01/17 职场文书
母亲追悼会答谢词
2014/01/27 职场文书
保证书格式范文
2014/04/28 职场文书
青春励志演讲稿
2014/04/29 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
校长新学期寄语2016
2015/12/04 职场文书