Javascript 滚动图片新闻的实现代码

发布时间:2020-09-10编辑:脚本学堂
本文介绍下Javascript实现滚动图片新闻的一段代码,用来学习js代码实现内容的滚动效果,还是不错的,感兴趣的朋友参考下吧。

本节内容:
javascript 滚动图片新闻

以下分享的这段代码用来实现图片新闻的滚动效果。

例子:
 

复制代码 代码示例:
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";
    } // www.jb200.com
    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();
}