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

你在这里做的基本上是改变图像的显示。尝试使用fadeIn和来自JQuery的fadeOut使事情逐渐消失

Answer 2

好吧，试图回答“如何”，幻灯片放映的工作是将图像划分为切片（或方框），例如：他们使用此功能将图像分割成切片

    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，你不觉得

Jquery Transition

2 个答案: