Плавное переключение изображения при прокрутке. Как реализовать?

Не могу сообразить как реализовать такую фичу: На странице есть, например 20 изображений

<div class="wrapper-img">
    <img src="img/1.jpg">
    <img src="img/2.jpg" style="display: none;">
    <img src="img/3.jpg" style="display: none;">
    ...
    <img src="img/20.jpg" style="display: none;">
</div>

Как по скролу добиться переключения изображений, то есть 1 - скрываем, 2 - выводим и т.д. Набрасал примерный js:

$(document).ready(function () {
    $(document).on('scroll', function () {
        var stackImages = $('.wrapper-img').find('img');
            // stackImages.hide().eq($(this).index()).css("display", "block"); - срабатывает один раз, то есть скрывает картинку1, делает видимой картинку 2
        for (var i = 0; i < stackImages.length; i++){
            // ...
        }
    });
});

Вопросы, которые появилсь: 1. Как заставить переключать изображения при прокрутке 2. Как установить через какой промежуток будет происходить переключение