2

我已经使用 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 使用的那些。我将如何去做，或者我在哪里可以找到资源来看看它是如何完成的。我想让过渡更令人赏心悦目。

任何帮助表示赞赏。

4

2 回答 2

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

于 2012-06-24T18:10:10.660 回答
1

您在这里所做的基本上是更改图像的显示。尝试使用JQuery 中的fadeIn和 fadeOut 使事物逐渐消失

于 2012-06-24T17:44:14.220 回答