deldalton Posted March 21, 2013 Share Posted March 21, 2013 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 More sharing options...
Ingolme Posted March 21, 2013 Share Posted March 21, 2013 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 comment Share on other sites More sharing options...
davej Posted March 22, 2013 Share Posted March 22, 2013 (edited) [...]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 March 22, 2013 by davej Link to comment Share on other sites More sharing options...
deldalton Posted April 2, 2013 Author Share Posted April 2, 2013 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now