slideshow banner without using flash

Question

I want to make a sort of repeating slideshow banner for my website, but i need some help on how to do it. The best example of what i want is on the play.com website, they have a banner that has 5 different slides, the site scrolls between them after X amount of time but the user can also click on one of the numbered buttons at the bottom of the banner to skip.

I'm thinking of doing this using HTML, CSS, JavaScript, AJAX and PHP. I have an Ajax script set up already linking to a php page that will at somepoint check through a database to get its content. But i want to output everything using lists lu and li.

So does anyone know of any tutorials or something i could use to get something like on play.com? play.com is more or less and exact match to what i want.

Thanks for the help.

Answer 1

here is a really simple one that loops through any number of <img> elements placed inside a <div class="slideshow"> wrapper and it only uses a few lines of jQuery and css...

---

http://jsfiddle.net/DaveAlger/eNxuJ/1/

---

hope this helps someone else

Answer 2

Unless you have a good reason for it, there's no need for you to create the slider yourself, there are tons of options already made (and tested).

I often use this two:

http://nivo.dev7studios.com/demos/

http://jquerytools.org/demos/scrollable/index.html

Answer 3

I use http://jquery.malsup.com/cycle/ as it has a very basic fade but also lots of different animations if needed.

Answer 4

You can use jQuery in combination with slideshow plugins. You don't have to do much by yourself. A plugin which does what you want can be found here: http://slidesjs.com

You can also search Google for "jquery slideshow". This should return lots of pages with plugins.