我使用 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 使用的效果。我将如何解决这个问题，或者我在哪里可以找到资源来了解它是如何完成的。我想让过渡看起来更赏心悦目一点。

感谢任何帮助。

1 Câu trả lời

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

    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(
                    $('
').css({ 
                        left:(sliceWidth*i)+'px', 
                        width:(slider.width()-(sliceWidth*i))+'px',
                        height:sliceHeight+'px', 
                        opacity:'0',
                        overflow:'hidden'
                    })
                );
            } khác {
                slider.append(
                    $('
').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){
                    đặt thời gian chờ(hàm(){
                        slice.animate({opacity:'1.0' }, settings.animSpeed, '', function(){ slider.trigger('nivo:animFinished'); });
                    }, (100 + timeBuff));
                } khác {
                    đặt thời gian chờ(hàm(){
                        slice.animate({opacity:'1.0' }, settings.animSpeed);
                    }, (100 + timeBuff));
                }
                timeBuff += 50;
                i++;
            });

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

关于Jquery 转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11179677/