Luce Digitale/JQ Sunny Slideshow – Basic
DEMO
Today I code a funny little 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 Slide 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 Slideshow</title>
<style type="text/css">
/* slideshow container style START */
.slideshow{width:800px; height:450px; /* same images width height */
margin:0 auto;
border:3px solid #CECECE;
background: url(css/images-gimme-code-2013-0026/slide-loader.gif) no-repeat 50% 50%; /* A simple gif preloader */
}
/* slideshow container style END */
/* slideshow content setup START */
.slideshow img{position: absolute; margin:0; padding:0;} /* All images in the same position */
.slideshow img{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 Slide START (Only 9 little lines of code)
$(function JQSunnySlideFading(){
$('.slideshow').css("background","white"); // hide the preloader
$('.slideshow img:gt(0)').hide(); // hide all images
setInterval(function(){ // setInterval repeat the execution of the function each xxx milliseconds
$('.slideshow :first-child').fadeOut() // fade out the first image
.next('img').fadeIn() // fade in the next image
.end().appendTo('.slideshow');}, // reset jQuery's internal reference
3000); // launches a function each 3000 milliseconds
});
// Luce Digitale/JQ Sunny Slide END
});
</script>
</head>
<body>
<!-- Slideshow START -->
<!-- If JQuery do not work you see only the first image "slide-800x450-1.jpg" -->
<div class="slideshow">
<img src="css/images-gimme-code-2013-0026/slide-800x450-1.jpg" />
<img src="css/images-gimme-code-2013-0026/slide-800x450-2.jpg" />
<img src="css/images-gimme-code-2013-0026/slide-800x450-3.jpg" />
<img src="css/images-gimme-code-2013-0026/slide-800x450-4.jpg" />
</div>
<!-- Slideshow END -->
</body>
</html>
