As part ogf my studies I am now looking at JavaScript and am working on a project that works similar to a slideshow where an image is loaded and then changes every 7 seconds. Having successfully achieved this using my limited knowledge I now need to add various bits of text onto the images and again these need to change per image.

I have tried googling this and keep getting answers using JavaScript Slideshow functionality but I have not come across this in my course material so wanted to achieve the same effect without using functionality I do not understand.

I am able to get the image to change and the various text elements to show as undefined and despite numerous attempts am getting nowhere fast.

I will post the Scripts used separately...

3rd attempt:

var i, imgs, pic, t, tle, title, d, dsc, desc, l, lnk, lnk;

function rotate()
{
pic.src=imgs;
title.text=tle;
desc.text=dsc;
link.text=lnk
( i === (imgs.length -1) ) ? i=0 : i++; setTimeout( rotate, 7000 );
( t === (tle.length -1) ) ? t=0 : t++; setTimeout( rotate, 7000 );
( d === (dsc.length -1) ) ? d=0 : d++; setTimeout( rotate, 7000 );
( l === (lnk.length -1) ) ? l=0 : l++; setTimeout( rotate, 7000 );
}


function init()
{
pic=document.getElementById("pic");
imgs=["p1.jpg", "p2.jpg", "p3.jpg"];
title=document.getElementById("title").innerHTML+=tle;
tle=["title1", "title2", "title3"];
desc=document.getElementById("desc").innerHTML+=dsc;
dsc=["desc1", "desc2", "desc3"];
link=document.getElementById("link").innerHTML+=lnk;
lnk=["link1", "link2", "link3"];

var preload= new Array();
for( i=0; i<imgs.length; i++ )
for( t=0; t<tle.length; t++ )
for( d=0; d<dsc.length; d++ )
for( l=0; l<lnk.length; l++ )

{
preload= new Image();
preload.src=imgs;
preload[t]= new Array();
preload[t].text=tle[t];
preload[d]= new Array();
preload[d].text=dsc[d];
preload[l]= new Array();
preload[l].text=lnk[l];
}

i=0;
rotate();
}

onload=init;

5th attempt

var i, imgs, pic, t, tle, title, d, dsc, desc, l, lnk, lnk;

function rotate()
{
pic.src=imgs;
title.text=tle;
desc.text=dsc;
link.text=lnk
( i === (imgs.length -1) ) ? i=0 : i++; setTimeout( rotate, 7000 );
( t === (tle.length -1) ) ? t=0 : t++; setTimeout( rotate, 7000 );
( d === (dsc.length -1) ) ? d=0 : d++; setTimeout( rotate, 7000 );
( l === (lnk.length -1) ) ? l=0 : l++; setTimeout( rotate, 7000 );
}


function init()
{
pic=document.getElementById("pic");
imgs=["p1.jpg", "p2.jpg", "p3.jpg"];
title=document.getElementById("title").innerHTML+=tle;
tle=["title1", "title2", "title3"];
desc=document.getElementById("desc").innerHTML+=dsc;
dsc=["desc1", "desc2", "desc3"];
link=document.getElementById("link").innerHTML+=lnk;
lnk=["link1", "link2", "link3"];

var preload= new Array();
for( i=0; i<imgs.length; i++ )
for( t=0; t<tle.length; t++ )
for( d=0; d<dsc.length; d++ )
for( l=0; l<lnk.length; l++ )

{
preload= new Image();
preload.src=imgs;
preload[t]= new Array();
preload[t].document.write(tle);
preload[d]= new Array();
preload[d].document.write(dsc);
preload[l]= new Array();
preload[l].document.write(lnk);
}

i=0;
rotate();
}

onload=init;

Finally sussed this:

var i, imgs, pic, tle, title, dsc, desc, lnk, link

function rotate()
{
pic.src=imgs;
title.innerHTML=tle;
desc.innerHTML=dsc;
link.innerHTML=lnk;
( i === (imgs.length -1) ) ? i=0 : i++; setTimeout( rotate, 5000 );
}

function init()
{
pic=document.getElementById("pic");
imgs=["p1.jpg", "p2.jpg", "p3.jpg"];
title=document.getElementById("title");
tle=["title1", "title2", "title3"];
desc=document.getElementById("desc");
dsc=["desc1", "desc2", "desc3"];
link=document.getElementById("link");
lnk=["link1", "link2", "link3"];

var preloadImage= new Array();
for( i=0; i<imgs.length; i++ )
var preloadTitle= new Array();
for( i=0; i<tle.length; i++ )
var preloadDesc= new Array();
for( i=0; i<dsc.length; i++ )
var preloadLink= new Array();
for( i=0; i<lnk.length; i++ )

{
preloadImage= new Array();
preloadImage.src=imgs;
preloadTitle= new Array();
preloadTitle.innerHTML=tle;
preloadDesc= new Array();
preloadDesc.innerHTML=dsc;
preloadLink= new Array();
preloadLink.innerHTML=lnk;
}

i=0;
rotate();
}

onload=init;

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.