-2

I'm still new to jQuery and come from a flash/javascript background when it comes to banners and dynamic web features. Does anyone know any good tutorials for a simple rotating banner?

I'm looking to build one with 3 rotating images and a 1,2,3 button to go back to other images.

Any help or advise would be great.

huddds
  • 1,045
  • 6
  • 27
  • 47

3 Answers3

1

You should get familiar with jQuery Animate.

But why reinvent the wheel ? There are so many good and well tested jQuery plugins.

Plugins

Tutorials

dknaack
  • 60,192
  • 27
  • 155
  • 202
1

Have a look at this function, it's a simple slider:

HTML

<img src="pic_01.jpg" id="photo" />
<span id="slideNumber"></span>

JS

var ImageArr1 = new Array("pic_01.jpg","pic_02.jpg","pic_03.jpg");
var ImageHolder1 = document.getElementById("photo");

function RotateImages(whichHolder,Start)
{
var a = eval("ImageArr"+whichHolder);
var b = eval("ImageHolder"+whichHolder);
if(Start>=a.length)
Start=0;
b.src = a[Start];
document.getElementById('slideNumber').textContent = "Slide "+(Start+1)+" of "+ImageArr1.length;
window.setTimeout("RotateImages("+whichHolder+","+(Start+1)+")",3500);
}

RotateImages(1,0);

I have a picture container and switch it's SRC-attribute to show the other pictures. It's timed automatically to 3500 milliseconds and shows information about the picture index below.

That's pure javascript I know, but have a look at it. It will teach you some basics.

Manticore
  • 1,284
  • 16
  • 38
  • I got my banner working finally, thanks for all the post's. I'll also try this code for another rotator I'm doing. Thanks everyone! – huddds Dec 22 '11 at 10:34
1

The jQuery Cycle-plugin is perfect for this

http://jquery.malsup.com/cycle/

It even makes a dynamic menu (like 1,2,3-bottons like you wanted).

OptimusCrime
  • 14,662
  • 13
  • 58
  • 96