Luce Digitale/JQ Sunny DIV Slideshow – Basic
DEMO
Today I code a funny little div slideshow in only 9 lines of code.
Last night I start studying some sample code on the web, this is the simplest solution in my opinion:
<!DOCTYPE html> <html> <!-- Luce Digitale/JQ Sunny DIV Slideshow START (Only 9 little lines of code) --> <!-- Author: Andrea Tonin - http://blog.lucedigitale.com --> <!-- This code come with absolutely no warranty --> <!-- If you use this code in your project please give a link to http://blog.lucedigitale.com --> <!-- Thanks in advance --> <head> <title>Luce Digitale/JQ Sunny DIV Slideshow</title> <style type="text/css"> /* slideshow container style START */ .slideshow{width:800px; height:450px; /* slideshow container size width height */ margin:0 auto; border:3px solid #CECECE; } /* slideshow container style END */ /* slideshow content setup START */ .slideshow div{position: absolute; margin:0; padding:0;} /* All div in the same position */ .slideshow div{width:800px; height:450px;} /* same slideshow container width height */ /* slideshow content setup END */ </style> <script type="text/javascript" src="js/jquery-2.0.3.js"></script> <script> $(document).ready(function(){ // Luce Digitale/JQ Sunny DIV Slide START (Only 9 little lines of code) $(function JQSunnyDivSlideFading(){ $('.slideshow div:gt(0)').hide(); // hide all div setInterval(function(){ // setInterval repeat the execution of the function each xxx milliseconds $('.slideshow :first-child').fadeOut() // fade out the first image .next('div').fadeIn() // fade in the next div .end().appendTo('.slideshow');}, // reset jQuery's internal reference 3000); // launches a function each 3000 milliseconds }); // Luce Digitale/JQ Sunny DIV Slide END }); </script> </head> <body> <!-- Slideshow START --> <!-- If JQuery do not work you see only the first div --> <div class="slideshow"> <div style="background-color: rgba(255,0,0,1);font-size:2em";>Div1 Content</div> <div style="background-color: rgba(0,255,0,1);font-size:3em";>Div2 Content</div> <div style="background-color: rgba(0,0,255,1);font-size:4em";>Div3 Content</div> <div style="background-color: rgba(255,0,255,1);font-size:5em";>Div4 Content</div> </div> <!-- Slideshow END --> </body> </html>