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

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).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();
}