本文提供一段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();
}