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操作文本框readOnly
May 15 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
Node.js的特点详解
Feb 03 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 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 __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
js 三级关联菜单效果实例
2013/08/13 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
python实现Floyd算法
2018/01/03 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
详解django自定义中间件处理
2018/11/21 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
妇产科护士自我鉴定
2013/10/15 职场文书
护理专业学生的求职信范文
2013/12/11 职场文书
职业生涯规划书范文
2014/03/10 职场文书
愚人节活动策划方案
2014/03/11 职场文书
党性分析自查总结
2014/10/14 职场文书
初中差生评语
2014/12/29 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
oracle索引总结
2021/09/25 Oracle