Jquery 转换

Question

我使用 jquery 组合了一个图像滚动器，如下所示

function rotateImages(whichHolder, start) {
    var images = $('#' +whichHolder).find('img');
    if(images.length < 1) return;

    start = start || 0; // Allow not to specify 0 when first calling
    if (start >= images.length) start=0;

    images.css({display: 'none'});

    var thisImg = $('#' +whichHolder +' img').get(start);
    $(thisImg).css({display: 'block'});

    return start + 1;
}

var start = 1;

$(function(){

    window.setInterval(function() {

        start = rotateImages('rotator', start);

    }, 5000);   

});

图像只是从一张变为下一张，我想做的是在其中添加过渡效果，类似于 NivoSlider 使用的效果。我将如何解决这个问题，或者我在哪里可以找到资源来了解它是如何完成的。我想让过渡看起来更赏心悦目一点。

感谢任何帮助。

Answer 1

好吧，试图回答“如何”，幻灯片的作用是将图像划分为切片(或框)，例如:他们使用此函数将图像划分为切片

    var createSlices = function(slider, settings, vars) {
        if($(vars.currentImage).parent().is('a')) $(vars.currentImage).parent().css('display','block');
        $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show();
        var sliceHeight = ($('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().is('a')) ? $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().height() : $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').height();

        for(var i = 0; i < settings.slices; i++){
            var sliceWidth = Math.round(slider.width()/settings.slices);

            if(i === settings.slices-1){
                slider.append(
                    $('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({ 
                        left:(sliceWidth*i)+'px', 
                        width:(slider.width()-(sliceWidth*i))+'px',
                        height:sliceHeight+'px', 
                        opacity:'0',
                        overflow:'hidden'
                    })
                );
            } else {
                slider.append(
                    $('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({ 
                        left:(sliceWidth*i)+'px', 
                        width:sliceWidth+'px',
                        height:sliceHeight+'px',
                        opacity:'0',
                        overflow:'hidden'
                    })
                );
            }
        }

        $('.nivo-slice', slider).height(sliceHeight);
        sliderImg.stop().animate({
            height: $(vars.currentImage).height()
        }, settings.animSpeed);
    };

一旦他们将图像划分为和平，他们就会尝试为每个和平进行动画过渡，例如:这就是他们应该如何为切片设置动画

            createSlices(slider, settings, vars);
            timeBuff = 0;
            i = 0;
            slices = $('.nivo-slice', slider);
            if(currentEffect === 'sliceDownLeft') { slices = $('.nivo-slice', slider)._reverse(); }

            slices.each(function(){
                var slice = $(this);
                slice.css({ 'top': '0px' });
                if(i === settings.slices-1){
                    setTimeout(function(){
                        slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
                    }, (100 + timeBuff));
                } else {
                    setTimeout(function(){
                        slice.animate({opacity:'1.0' }, settings.animSpeed);
                    }, (100 + timeBuff));
                }
                timeBuff += 50;
                i++;
            });

但是，我个人认为，如果您想要一个为每张幻灯片添加动画效果的幻灯片，只需使用 NivoSlider，您不认为