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 setattribute批量设置css样式
Nov 26 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
Sep 02 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
深入浅出理解javaScript原型链
May 09 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
JavaScript验证知识整理
Mar 24 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 Javascript
angularjs性能优化的方法
Sep 05 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/10/30 PHP
php程序效率优化的一些策略小结
2010/07/17 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
Python获取脚本所在目录的正确方法
2014/04/15 Python
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
Python 数据结构之队列的实现
2017/01/22 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
数控技术专业推荐信
2013/11/01 职场文书
房地产销售大学生自我评价分享
2013/11/11 职场文书
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
家长建议怎么写
2014/05/15 职场文书
企业计划生育责任书
2015/05/09 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
六年级情感作文之500字
2019/10/23 职场文书