Jump to content

Image Rotator: In CSS?


deldalton
 Share

Recommended Posts

I have a div that contains an image. I would like the image to change, approximately every 5 seconds, to another image. There may be up to 10 images that I would like to have rotate (although I suppose the amount of images is, perhaps, irrelevant). I know that this is possible with Java Script. I've seen it work and suspect it's actually fairly straight forward (I'm sure there's countless tutorials on the internet, if I really get stuck). What I'd really like to know is if this is possible without using Java Script and instead using CSS? I believe it's possible in CSS3, as I read an article earlier with someone suggesting it was possible (but their demos weren't working in Internet Explorer). But that is, of course, a problem. I'd like a solution that I can use in most "major" browsers (IE, Chrome, Firefox, Safari etc.). CSS3 is only supported on the latest browsers and, even then, not all features are compatible. So, I don't think that's the answer. Does that leave me with no choice but to use Java Script?

Link to comment
Share on other sites

[...]Does that leave me with no choice but to use Java Script?
You might want to look at jQuery with a slideshow plugin. It might be a simple solution for you. For example... http://www.malsup.com/jquery/cycle/ ...which can be a page as simple as this...
<!DOCTYPE html><html><head><title>JQuery Cycle Plugin - Basic Demo</title><style type="text/css">.slideshow { height: 232px; width: 232px; margin: auto }.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }</style><!-- include jQuery library --><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><!-- include Cycle plugin --><script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script><script type="text/javascript">$(document).ready(function() {    $('.slideshow').cycle({  fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...});});</script></head> <body><div class="slideshow">  <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />  <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />  <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />  <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />  <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" /></div></body></html>

Edited by davej
Link to comment
Share on other sites

  • 2 weeks later...
It can't be done with CSS2.1. Javascript is required and probably preferable to CSS3 at the moment as you can add controls to it.
Ingolme. I thought that might be the case. Thanks!
You might want to look at jQuery with a slideshow plugin. It might be a simple solution for you. For example... http://www.malsup.com/jquery/cycle/ ...which can be a page as simple as this...
<!DOCTYPE html><html><head><title>JQuery Cycle Plugin - Basic Demo</title> <style type="text/css">.slideshow { height: 232px; width: 232px; margin: auto }.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }</style> <!-- include jQuery library --><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><!-- include Cycle plugin --><script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script><script type="text/javascript">$(document).ready(function() {	$('.slideshow').cycle({  fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...});});</script></head> <body><div class="slideshow">  <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />  <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />  <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />  <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />  <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" /></div> </body></html>

DaveJ. Thanks for the suggestion. I'll look into it.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...