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 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
基于jquery的超简单上下翻
Apr 20 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
js实现省市级联效果分享
Aug 10 Javascript
JS实现元素上下左右移动效果
Oct 18 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
讨论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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
juqery 学习之四 筛选查找
2010/11/30 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
js实现验证码功能
2020/07/24 Javascript
Python中的生成器和yield详细介绍
2015/01/09 Python
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
使用tensorflow实现AlexNet
2017/11/20 Python
python hough变换检测直线的实现方法
2019/07/12 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
python scipy卷积运算的实现方法
2019/09/16 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
几个CSS3的flex弹性盒模型布局的简单例子演示
2016/05/12 HTML / CSS
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
思想政治教育专业个人求职信范文
2013/12/20 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
社会实践活动报告
2015/02/05 职场文书
党支部培养考察意见
2015/06/02 职场文书
学习党章心得体会2016
2016/01/15 职场文书
乔迁新居祝福语
2019/11/04 职场文书
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android