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>
Hi,
ReplyDeleteIt very good example for making image view.
Well
DeleteDear Amar ,
ReplyDeleteI implement it in to one of my project, it's really a very simple
to integrate.
Thanks for providing such a nice solution ,what is next
Thanx Amar
ReplyDeleteIt's really help me......
Hi Amar,
ReplyDeleteThanks, It's very nice and very easy to use.
I am searching this kind of script from long time and finally i got the script as per my requirement.
Thanks again Amar.. keep on
Thanks Yar
Deletenice script very usefull
ReplyDeleteHi, nice work... useful for many people..
ReplyDeleteGood
Delete