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

作者:拾光

时间:2026-10-27

浏览:392

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

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章