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 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
JQuery筛选器全系列介绍
Aug 27 Javascript
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 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将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
浅析vue-router原理
2018/10/19 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python 自动提交和抓取网页
2009/07/13 Python
初步解析Python中的yield函数的用法
2015/04/03 Python
在Python中使用Neo4j数据库的教程
2015/04/16 Python
Python简单进程锁代码实例
2015/04/27 Python
python中enumerate函数遍历元素用法分析
2016/03/11 Python
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
护士辞职信范文
2014/01/19 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
教师见习报告范文
2014/11/03 职场文书
毕业典礼主持词
2015/06/29 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
Java 常见的限流算法详细分析并实现
2022/04/07 Java/Android