Jump to content

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 post
Share on other sites

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.

Link to post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...