Image Looper

by sanjshah

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="fader clearfix">
  <img src="http://placehold.it/200x200?text=1" class="default-slider" />
  <img src="http://placehold.it/200x200?text=2" class="default-slider" style="display: none" />
  <img src="http://placehold.it/200x200?text=3" class="default-slider" style="display: none" />
  <img src="http://placehold.it/200x200?text=4" />
</div>

CSS

.fader {
    position: relative;
    width: 980px;
    height: 347px;
}
.default-slider {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

var InfiniteRotator =
    {
        init: function () {
            var isPaused = false;   // New variable
            var initialFadeIn = 1000;
            var itemInterval = 2500;
            var fadeTime = 2000;
            var numberOfItems = $('.default-slider').length;
            var currentItem = 0;

            $('.default-slider').mouseenter(function () { // Mouse over slider, pause
                isPaused = true;
            }).mouseleave(function () { // mouse out of slider, unpause
                isPaused = false;
            });

            $('.default-slider').eq(currentItem).fadeIn(initialFadeIn);
            var infiniteLoop = setInterval(function () {
                if (!isPaused) { // only run if not paused
                    $('.default-slider').eq(currentItem).fadeOut(fadeTime);
                    if (currentItem == numberOfItems - 1) {
                        currentItem = 0;
                    } else {
                        currentItem++;
                    }
                    $('.default-slider').eq(currentItem).fadeIn(fadeTime);
                }
            }, itemInterval);
        }
    };
    InfiniteRotator.init();