Download to read offline
Uploaded byIshaq Shinwari
Jquery image slider
The document describes an image slideshow that automatically rotates images every 1 second. It uses jQuery to select the current "active" image, get the next image, add the "active" class to the next image and remove it from the current image. This is done within a setInterval function to repeat the rotation every second.
More Related Content
Jquery image slider
- 1.
- 2. <!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"> <head> <style type="text/css"> .active{ z-index:99; } </style> <script src="jquery.js"> </script> <script> function slideSwitch() { var $active = $('div#slideshow IMG.active'); var $next = $active.next(); $next.addClass('active'); $active.removeClass('active'); } $(function() { setInterval( "slideSwitch()", 1000 ); }); </script> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Untitled 1</title> </head> <body> <div id="slideshow"> <img src="banner.png" style="position:absolute; left: 10px; top: 15px;" height="228" class="active" width="900" /> <img src="id.png" style="position:absolute;" height="228" width="900" /> <img src="sd.png" style="position:absolute; left: 20px; top: 15px;" height="228" width="900" /> </div> </body>
- 3. <body> <div id="slideshow"> <img src="banner.png" style="position:absolute;left: 10px; top: 15px;" height="228" class="active" width="900" /> <img src="id.png" style="position:absolute;" height="228" width="900" /> <img src="sd.png" style="position:absolute; left: 20px; top: 15px;" height="228" width="900" /> </div> </body>
- 4.
- 5. <script src="jquery.js"> </script> <script> function slideSwitch(){ var $active = $('div#slideshow IMG.active'); var $next = $active.next(); $next.addClass('active'); $active.removeClass('active'); } $(function() { setInterval( "slideSwitch()", 1000 ); }); </script>