ImageScroll - Slideshow

by Silambarasan_sundaram

HTML

<ul id="exampleSlider">
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x250" alt="" /></li>
    <li><img src="http://placehold.it/500x250" alt="" /></li>
</ul>

CSS

img {width: 100%:}
#exampleSlider {max-height: 250px; overflow: hidden; list-style: none; padding: 0; margin: 0;}

JavaScript

$(function () {
    
    /* SET PARAMETERS */
    var change_img_time 	= 5000;	
    var transition_speed	= 300;
    
    var simple_slideshow	= $("#exampleSlider"),
        listItems 			= simple_slideshow.children('li'),
        listLen				= listItems.length,
        i 					= 0,
		
        changeList = function () {
		
			listItems.eq(i).fadeOut(transition_speed, function () {
				i += 1;
				if (i === listLen) {
					i = 0;
				}
				listItems.eq(i).fadeIn(transition_speed);
			});

        };
		
    listItems.not(':first').hide();
    setInterval(changeList, change_img_time);
	
});