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 相关文章推荐
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
Aug 13 Javascript
获取客户端电脑日期时间js代码(jquery)
Sep 12 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
javascript实现日期格式转换
Dec 16 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
详解vue 图片上传功能
Apr 30 Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 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 获取当前访问的url文件名的方法小结
2010/02/08 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
基于vue.js无缝滚动效果
2018/01/25 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
vue实现信息管理系统
2020/05/30 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
python制作图片缩略图
2019/04/30 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
公司前台接待岗位职责
2013/12/03 职场文书
大学生创业计划书
2014/08/14 职场文书
庆六一活动总结
2014/08/29 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
特种设备安全管理制度
2015/08/06 职场文书
党员理论学习心得体会
2016/01/21 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书