Rotating News Script

[Jeigh]

Hello,

I've never used Javascript before (my site is basically all in PHP), and I wanted 5 news articles to rotate on the front page eg. first news will show, 5 seconds later it will switch to the second etc.

I was lucky enough to find a script that I figured out how to modify to my needs and it's working fine, however I'd also like people to be able to manually scroll through them. I want there to be '1 - 2 - 3 - 4 - 5' down the bottom, when people click / hover over them it will skip straight to that news article. Here's the code I have at the moment:

//pre-load images
var listImg = new Image();
listImg.src = 'watch.gif';
var treeImg = new Image();
treeImg.src = 'dhtml.gif';
var formImg = new Image();
formImg.src = 'form.gif';
var autoImg = new Image();
autoImg.src = 'web.gif';
 
function makeNews(c,l,f,i){
    this.copy = c;
    this.link = l;
    this.follow = f;
    this.img = i;
    this.write = writeNews;
}
 
function writeNews(){
    var str = '';
    str += this.copy + '<br>';
        str +=  '<a href="' + this.link + '">' + this.follow + '</a>';
    return str;
}
 
var newsArray = new Array();
newsArray[0] = new makeNews("News here",'link<br />','Full Article',listImg).write();
 
newsArray[1] = new makeNews("News Here",'link','Full Article',treeImg).write();
 
newsArray[2] = new makeNews("News Here",'link','Full Article',autoImg).write();
 
newsArray[3] = new makeNews("News Here",'link','Full Article',formImg).write();
 
newsArray[4] = new makeNews("News here",'link','Full Article',formImg).write();
 
var nIndex = 0;
var timerID = null;
function rotateNews(){
    var len = newsArray.length;
    if(nIndex >= len)
        nIndex = 0;
    document.getElementById('stories').innerHTML = newsArray[nIndex];
    nIndex++;
    timerID = setTimeout('rotateNews()',9000);
}
function pauseNews() {
    if (timerID != null) {
        clearTimeout(timerID);
        timerID = null;
    }
}
 
function playNews() {
    if (timerID == null) {
        timerID = setTimeout('rotateNews()', 1000);
    }
}
 
 

Thanks for any help.

[acoder]

The first link could have the following code onclick:

document.getElementById('stories').innerHTML = newsArray[0]; return false;

If you want to create the links automatically, use a for loop to create links for each item in the news array.

[Jeigh]

Thank you very much acoder, it works great.

[acoder]

You're welcome. Glad it worked.