/ Published in: jQuery
This slide show was created by Jon Raasch @ JonRaasch.com.
Just images. Look for Slide show #2 for a slide show using DIVs.
hamiltopia_jquerySlideshow2
Just images. Look for Slide show #2 for a slide show using DIVs.
hamiltopia_jquerySlideshow2
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/> <title>Simple jQuery Slideshow from JonRaasch.com</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // You may specify partial version numbers, such as "1" or "1.3", // with the same result. Doing so will automatically load the // latest version matching that partial revision pattern // (i.e. both 1 and 1.3 would load 1.3.2 today). google.load("jquery", "1.3.2"); google.setOnLoadCallback(function() { // Place init code here instead of $(document).ready() }); </script> <script type="text/javascript"> /*** Simple jQuery Slideshow Script Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :) ***/ function slideSwitch() { var $active = $('#slideshow IMG.active'); if ( $active.length == 0 ) $active = $('#slideshow IMG:last'); // use this to pull the images in the order they appear in the markup var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first'); // uncomment the 3 lines below to pull the images in random order // var $sibs = $active.siblings(); // var rndNum = Math.floor(Math.random() * $sibs.length ); // var $next = $( $sibs[ rndNum ] ); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); </script> <style type="text/css"> /*** set the width and height to match your images **/ #slideshow { position:relative; height:350px; } #slideshow IMG { position:absolute; top:0; left:0; z-index:8; opacity:0.0; } #slideshow IMG.active { z-index:10; opacity:1.0; } #slideshow IMG.last-active { z-index:9; } </style> </head> <body style="font-family: Arial, Sans-serif, sans;"> <h1>Simple jQuery Slideshow</h1> <h2>By <a href="http://jonraasch.com/blog/">Jon Raasch</a></h2> <!-- this will work with any number of images --> <!-- set the active class on whichever image you want to show up as the default (otherwise this will be the last image) --> <div id="slideshow"> <img src="image1.jpg" alt="Slideshow Image 1" class="active" /> <img src="image2.jpg" alt="Slideshow Image 2" /> <img src="image3.jpg" alt="Slideshow Image 3" /> <img src="image4.jpg" alt="Slideshow Image 4" /> <img src="image5.jpg" alt="Slideshow Image 5" /> </div> <p>For more info visit <a href="http://jonraasch.com/blog/a-simple-jquery-slideshow">http://jonraasch.com/blog/a-simple-jquery-slideshow</a></p> </body> </html>
URL: hamiltopia_jquerySlideshow1