当前位置：首页 > 资讯 > 技术文档

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

时间：2021-04-05 18:05 编辑：来源：阅读：
扫一扫，手机访问

摘要：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";
    }
    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();
}

全部评论(0)

上一篇：Bootstrap 粘页脚效果
下一篇：利用javascript打开模态对话框(示例代码)

资讯排行榜
更多>>