deldalton 0 Posted March 21, 2013 Report 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? Quote Link to post Share on other sites
Ingolme 1,035 Posted March 21, 2013 Report 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. Quote Link to post Share on other sites
davej 251 Posted March 22, 2013 Report 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 Quote Link to post Share on other sites
deldalton 0 Posted April 2, 2013 Author Report 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. Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.