快捷導(dǎo)航

Javascript實(shí)現(xiàn)滾動(dòng)圖片新聞的實(shí)例代碼

更新時(shí)間：2013年11月27日 10:05:02 作者：

這篇文章主要介紹了Javascript實(shí)現(xiàn)滾動(dòng)圖片新聞的實(shí)例代碼。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助

下面這段代碼是用來(lái)實(shí)現(xiàn)圖片新聞的

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

您可能感興趣的文章:

相關(guān)文章

基于JavaScript實(shí)現(xiàn)輪播圖代碼
在前端程序開(kāi)發(fā)中，經(jīng)常會(huì)實(shí)現(xiàn)js輪播圖的效果，怎么實(shí)現(xiàn)的呢？下面小編給大家分享基于基于JavaScript實(shí)現(xiàn)輪播圖代碼，非常不錯(cuò)，感興趣的朋友可以參考下
2016-07-07
JavaScript對(duì)Cookie進(jìn)行讀寫(xiě)操作實(shí)例
這篇文章主要介紹了JavaScript對(duì)Cookie進(jìn)行讀寫(xiě)操作的方法,實(shí)例分析了javascript針對(duì)cookie的讀寫(xiě)操作技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-07-07
js調(diào)試工具console.log()方法查看js代碼的執(zhí)行情況
以往都是使用alert的方式查看js代碼的執(zhí)行情況，今天看到有朋友使用console.log函數(shù)打印輸出函數(shù),變量,對(duì)象,下邊就console.log的使用情況進(jìn)行記錄
2014-08-08
js樹(shù)插件zTree獲取所有選中節(jié)點(diǎn)數(shù)據(jù)的方法
這篇文章主要介紹了js樹(shù)插件zTree獲取所有選中節(jié)點(diǎn)數(shù)據(jù)的方法,是對(duì)js樹(shù)插件zTree非常實(shí)用的操作,需要的朋友可以參考下
2015-01-01
Javascript檢查圖片大小不要讓大圖片撐破頁(yè)面
用Javascript判斷圖片大小，其實(shí)只要寫(xiě)一個(gè)簡(jiǎn)單的函數(shù)就可以了，使用其他語(yǔ)言進(jìn)行判斷，過(guò)程比較復(fù)雜，用 Javascript 判斷輕松搞定
2014-11-11
JavaScript HTML DOM 元素 (節(jié)點(diǎn))新增，編輯，刪除操作實(shí)例分析
這篇文章主要介紹了JavaScript HTML DOM 元素 (節(jié)點(diǎn))新增，編輯，刪除操作,結(jié)合實(shí)例形式分析了JavaScript針對(duì)HTML DOM 元素 (節(jié)點(diǎn))的新增，編輯，刪除相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下
2020-03-03
JavaScript獲取鼠標(biāo)坐標(biāo)的函數(shù)（兼容IE、FireFox、Chrome）
下午想做個(gè)鼠標(biāo)跟隨的JS腳本，發(fā)現(xiàn)瀏覽器兼容問(wèn)題還真是煩人，還有滾動(dòng)條位置的問(wèn)題。
2010-01-01
js獲取數(shù)組中的最大值的9種方法總結(jié)
這篇文章主要為大家詳細(xì)介紹了js獲取數(shù)組中的最大值的9種方法，以及每種方法的工作原理和用法，文中的示例代碼講解詳細(xì)，需要的可以參考下
2023-08-08
express異步函數(shù)異常捕獲示例詳解
這篇文章主要給大家介紹了關(guān)于express異步函數(shù)異常捕獲的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
javascript數(shù)組includes、reduce的基本使用
這篇文章主要給大家介紹了關(guān)于javascript數(shù)組includes、reduce的基本使用方法,includes方法是用于檢查特定元素是包含在數(shù)組還是字符串中的方法,而reduce用法則有很多,需要的朋友可以參考下
2021-07-07