scrolling images on a timer

[KyleG]

scrolling images on a timer for java script. My head is battard to find a decent one that works!!!!. Someone show me a decent one.

[codemonkey]

Is this any help?

http://net.tutsplus.com/tutorials/javascript-ajax/building-a-jquery-image-scroller/

[KyleG]

doesnt work for me :S

[Darker X]

you must have got something wrong then - works fine for me

[Iainm]

Works fine for me as well

[KyleG]

i ment the site didnt work last night and thats the wrong type of thing :/. I need a slideshow so it switches from one image and fades to another.

[codemonkey]

i ment the site didnt work last night and thats the wrong type of thing :/. I need a slideshow so it switches from one image and fades to another.

You should have said slideshow originally then :furious:

Try this: -
http://malsup.com/jquery/cycle/

[SilverSurfer1959]

<!-- configurable script -->
<script type="text/javascript">
theimage = new Array();


// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["your image here", "link to image here", "name/description"];
theimage[1]=["as above", "layout is shown above", "add as many images as you want"];
theimage[2]=["donr forget to name them", "but this works good", "and it has a timer"];


///// Plugin variables

playspeed=3000;// The playspeed determines the delay for the "Play" button in ms
//#####
//key that holds where in the array currently are
i=0;


//###########################################
window.onload=function(){

//preload images into browser
preloadSlide();

//set the first slide
SetSlide(0);

}

//###########################################
function SetSlide(num) {
//too big
i=num%theimage.length;
//too small
if(i<0)i=theimage.length-1;

//switch the image
document.images.imgslide.src=theimage[i][0];

//if they want name of current slide
document.getElementById('slidebox').innerHTML=thei mage[i][2];

}


//###########################################
function PlaySlide() {
if (!window.playing) {
PlayingSlide(i+1);
if(document.slideshow.play){
document.slideshow.play.value=" Stop ";
}
}
else {
playing=clearTimeout(playing);
if(document.slideshow.play){
document.slideshow.play.value=" Play ";
}
}
// if you have to change the image for the "playing" slide
if(document.images.imgPlay){
setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
imgStop=document.images.imgPlay.src
}
}


//###########################################
function PlayingSlide(num) {
playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1 );', playspeed);
}


//###########################################
function preloadSlide() {
for(k=0;k<theimage.length;k++) {
theimage[k][0]=new Image().src=theimage[k][0];
}
}


</script>


<!-- slide show HTML -->
<form name="slideshow">

<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="center">
<a href="#" onmouseover="this.href=theimage[i][1];return false">
<script type="text/javascript">
document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
</script>
</a>
</td>
</tr>
<tr>
<td align="center"><div id="slidebox"></div></td>
</tr>
<tr>
<td align="center">
<input type="button" value="I<<" onclick="SetSlide(0);" title="Jump to starting image">
<input type="button" value="<<" onclick="SetSlide(i-1);" title="Previous image">
<input type="button" name="play" value=" Play " onclick="PlaySlide();" title="Autoplay">
<input type="button" value=">>" onclick="SetSlide(i+1);" title="Jump to next image">
<input type="button" value=">>I" onclick="SetSlide(theimage.length-1);" title="Jump to ending image">
</td>
</tr>
</table>

</form>
<!-- end of slide show HTML -->

you dont have to use it as it, you can play about with the code and make it do what you want really, its very configurable.

or maybe you want a simple scrolling marquee script??

Theres even a generator...http://www.ricocheting.com/js/slide2.html