Как сделать плавные переходы между изображениями

Чтобы плавно перейти к другому изображению, вам необходимо использовать следующую процедуру:

1) Загрузите новое изображение за изображение, которое вы хотите поменять. Выполняете ли вы это, загружая новое изображение в фоновом режиме в div или клонируя существующий элемент изображения.

2) Затухание текущего изображения. Это покажет изображение сзади.

3) Очистка - удалите любые избыточные элементы или css, которые вы создали на этом пути.

Пример скрипта - щелкните изображение, чтобы вызвать загрузку следующего.

Я прокомментировал код JS, надеясь, что он позволит вам изменить код в соответствии с вашими собственными целями.

JS

(function() {
    "use strict";

    function swapImage(newIndex, preload) {
        var newImgSrc;
        var $img = $imgContainer.find('img');
        var imgIsAnimating = $img.is(':animated');

        if (!imgIsAnimating) {
            newImgSrc = images[newIndex];
            // Set background-image to new image
            $imgContainer.css({'background-image': 'url(' + newImgSrc + ')'});

            //Set data-index to the new index value
            $imgContainer.data('index', newIndex);

            // Fade old image
            $imgContainer.find('img').animate({ opacity: 0 }, function () {
                //** Callback upon fade animation completed **/
                imageSwapTidyUp(newImgSrc);
            });

        }
    }

    function imageSwapTidyUp(newImgSrc) {
        var $img = $imgContainer.find('img');
        // Change img src to new image
        $img.prop('src', newImgSrc);
        // Make img opaque
        $img.animate({ opacity: 1 }, 100);
    }

    function addArrayNextIndexSupport() {
        // Modify the Array object prototype, add nextIndex method
        if (!Array.prototype.nextIndex) {
            Array.prototype.nextIndex = function (currentIndex) {
                // currentIndex + 1 if in bounds, else 0
                return currentIndex < this.length - 1 ? currentIndex + 1 : 0;
            }
        }
    }

    //** On initialisation **//

    // Array holding all the images to be loaded
    var images = [
        'http://s30.postimg.org/8877xxo69/image.jpg',
        'http://s14.postimg.org/utnk4hm8h/image.jpg',
        'http://s22.postimg.org/4cy006wbl/firecat.jpg',
        'http://s27.postimg.org/456i0ge43/mad_baby.jpg'
    ];
    var $imgContainer;

    // Adds nextIndex to Array object
    addArrayNextIndexSupport();

    //** On DOM Ready **//
    $(function () {
        // Cache a reference to .img-container
        $imgContainer = $('.img-container');

        $imgContainer
            .data('index', 0) // Set data-index to 0 on init
            .on('click', function () {
                var newIndex = images.nextIndex($(this).data('index'));
                swapImage(newIndex);
            });
    });
}());

CSS

.img-container {
    background-repeat: no-repeat;
    background-position: top left;
    width: 620px;
    height: 465px;
}
.img-container img {
    display: block;
}

HTML

<div class="img-container">
    <img src="http://s30.postimg.org/8877xxo69/image.jpg" alt="">
</div>