Hello, need help designing a website.

 

Can anyone tell me how to do the picture with 4 different pics on the following website?

 

www.stv.tv

 

At the moment the scroll has This Morning, Alan Titchmarsh, Coronation St and Identity.

 

How do I create this sort of effect so I can put it on a website with 4 pictures changing say every 5 seconds?

 

Thanks in advance

 

 

themauker

Google jQuery slider. You will find more then enough to pick from and adapt for your own use.

There are some scripts here:

 

http://www.1stwebdesigner.com/freebies/javascript-sliders-scrollers/

 

http://www.tripwiremagazine.com/2012/02/jquery-image-slider-plugins.html

Edited February 29, 201214 yr by Florin

COPY THIS BIT AND CHANGE THE BITS IN CAPS TO YOUR IMAGE NAMES

 

<script type="text/javascript">

 

var imgs1 = new Array("IMAGE1.JPG","IMAGE2.JPG");

 

var lnks1 = new Array("graphic.php","web.php","web.php","portfolio.php","contact.php");

 

var alt1 = new Array("ALT TAG 1", "ALT TAG 2");

 

var currentAd1 = 0;

 

var imgCt1 = 5;

 

function cycle1() {

if (currentAd1 == imgCt1) {

currentAd1 = 0;

}

var banner1 = document.getElementById('adBanner1');

var link1 = document.getElementById('adLink1');

banner1.src=imgs1[currentAd1]

banner1.alt=alt1[currentAd1]

document.getElementById('adLink1').href=lnks1[currentAd1]

currentAd1++;

}

window.setInterval("cycle1()",3000);

</script>

 

//THIS BIT IS THE FIRST IMAGE - REMEMBER TO CHANGE THE WIDTH AND HEIGHT

 

<a href="graphic.php" id="adLink1">

<img src="IMG 1.jpg" id="adBanner1" width="850" height="175" alt="ALT TAG" /></a>

 

heres the banner in action on my site www.21designstudio.co.uk

 

good luck