Question

好的我喜欢幻灯片的jquery循环插件。我最近收到了很多全屏背景幻灯片网站的请求。

我一直没有成功编辑jquery循环js以使幻灯片始终调整大小。

我需要使用this代码并添加this之类的内容。

我很确定这是你编辑jquery循环插件的地方：

    // stretch slides
    if (opts.fit) {
            if (!opts.aspect) {
            if (opts.width)
                $slides.width(opts.width);
            if (opts.height && opts.height != 'auto')
                $slides.height(opts.height);
            } else {
                    $slides.each(function(){
                            var $slide = $(this);
                            var ratio = (opts.aspect === true) ? $slide.width()/$slide.height() : opts.aspect;
                            if( opts.width && $slide.width() != opts.width ) {
                                    $slide.width( opts.width );
                                    $slide.height( opts.width / ratio );
                            }

                            if( opts.height && $slide.height() < opts.height ) {
                                    $slide.height( opts.height );
                                    $slide.width( opts.height * ratio );
                            }
                    });
            }
    }

    if (opts.center && ((!opts.fit) || opts.aspect)) {
            $slides.each(function(){
                    var $slide = $(this);
                    $slide.css({
                            "margin-left": opts.width ?
                                    ((opts.width - $slide.width()) / 2) + "px" :
                                    0,
                            "margin-top": opts.height ?
                                    ((opts.height - $slide.height()) / 2) + "px" :
                                    0
                    });
            });
    }

    if (opts.center && !opts.fit && !opts.slideResize) {
            $slides.each(function(){
            var $slide = $(this);
            $slide.css({
                    "margin-left": opts.width ? ((opts.width - $slide.width()) / 2) + "px" : 0,
                    "margin-top": opts.height ? ((opts.height - $slide.height()) / 2) + "px" : 0
            });
            });
    }

    // stretch container
    var reshape = opts.containerResize && !$cont.innerHeight();
    if (reshape) { // do this only if container has no size http://tinyurl.com/da2oa9
            var maxw = 0, maxh = 0;
            for(var j=0; j < els.length; j++) {
                    var $e = $(els[j]), e = $e[0], w = $e.outerWidth(), h = $e.outerHeight();
                    if (!w) w = e.offsetWidth || e.width || $e.attr('width');
                    if (!h) h = e.offsetHeight || e.height || $e.attr('height');
                    maxw = w > maxw ? w : maxw;
                    maxh = h > maxh ? h : maxh;
            }
            if (maxw > 0 && maxh > 0)
                    $cont.css({width:maxw+'px',height:maxh+'px'});
    }

    var pauseFlag = false;  // https://github.com/malsup/cycle/issues/44
    if (opts.pause)
            $cont.hover(
                    function(){
                            pauseFlag = true;
                            this.cyclePause++;
                            triggerPause(cont, true);
                    },
                    function(){
                            pauseFlag && this.cyclePause--;
                            triggerPause(cont, true);
                    }
            );

    if (supportMultiTransitions(opts) === false)
            return false;

Answer 1

您只是想调整图片大小以适应全屏？为什么要修改jQuery循环？为什么不使用它提供的回调函数。

$(element).cycle({
    opt1: val1,
    ....
    before: function(currSlideElement, nextSlideElement, options, forwardFlag) {

        //resize each image here, before it is displayed

    }
});

或者，您可以在页面加载时调整所有图像的大小。为什么需要等到图像准备好显示才能调整大小？

以同样的方式，您可以在调整浏览器窗口大小的情况下处理图像的大小调整。

$(window).resize(function() {

    //resize the images again

});

除非您尝试创建自己想要分发的插件，否则我没有看到修改/扩展jQuery循环的重点。这只是我的意见。

Answer 2

看看MaxImage 2.0 jquery插件。

这是一个插件，只是站在jQuery Cycle Plugin上，但允许全屏幻灯片显示。它已接近最终发布，并已在IE7 +，Firefox，Chrome，Safari，iOS中进行了测试，但仍处于测试阶段（截至11-07-11），因此如果您使用它，请确保首先对其进行全面测试。

如果你在the beta release page给它一个旋转，请告诉我你可能有的任何想法或建议。感谢。

需要帮助自定义jQuery Cycle插件

2 个答案: