Here is the code for creating simple slideshow with fade in / fade out Effect. You can use it without writing extra javascript line of code using jquery API.
----------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------
Image Slider Code
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <style> #fadein {margin:0px auto; width:100px; height:80px; position:relative;} #fadein img { position:absolute;left:0;top:0; border:5px solid #ccc;} </style> <script> $(document).ready(function() { $('#fadein img:gt(0)').hide(); setInterval(function() { $('#fadein :first-child').fadeOut("slow") .next('img').fadeIn("slow") .end().appendTo('#fadein'); },3000); }); </script> </head> <body> <div id="fadein"> <img src="1.jpg" /> <img src="2.jpg" /> <img src="3.jpg" /> <img src="4.jpg" /> <img src="5.jpg" /> </div> </body> </html>
