Question

我在我的个人网站上工作，我对插件Juicyslider有问题。我工作了3天但我找不到解决方案......我是初学者：/

所以，我把问题的图像放在下面。我使用Juicyslider制作我作品的画廊形象。一切都很好但除了一件事。第一个图像加载不适合页面。但是，在使用导航（之前或之后）以及当我回到第一张图片时，这个适合页面...首先我认为这是position:absolute，display:none的问题和width:100%，之后我认为这是JS中的一个问题，具有函数的顺序。但我尝试的一切都不起作用

HTML

<div class="description-project">
            <div id="myslider_project" class="juicyslider">
                <ul>
                    <li><img src="img.jpg"></li>
                    <li><img src="img1.jpg"></li>
                    <li><img src="im2.jpg"></li>
                </ul>
                <div class="nav prev"></div>
                <div class="nav next"></div>
            </div>
</div>

CSS

.juicyslider {
position: relative;
padding:0;
margin: 0;
border: 0;
}

.juicyslider ul {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
list-style: none outside none;
padding:0;
margin:0;
}

.juicyslider li {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
display: none;       /* all hidden initially */
}

.juicyslider li:first-child {
position: absolute;
width: 100%;
height: 100%;
right: 0;
left: 0;
display: block; 
}

.juicyslider .nav {
position: absolute;
top: 45%;
padding: 20px;
cursor: pointer;
z-index: 500;
background-image: url(../img/nav-40.png);

.juicyslider img.maxw {
width: 100%;
height: auto;
position: absolute;
filter: inherit;     /* for ie8 to inherit parent opacity */
}

.juicyslider img.maxh {
width: auto;
height: 100%;
position: absolute;
filter: inherit;     /* for ie8 to inherit parent opacity */
}

和JS文件（函数（$）{

$.fn.juicyslider = function(options) {

    var 
    settings = $.extend({
        // these are the defaults.
        mode: "cover", // "cover" or "contain"
        width: 'null', // set null to make the slider as wide/tall as the window,
        height: 'null', // otherwise set any other values in px or % unit
        mask: "none", // "raster", "square", "strip" or "none"
        bgcolor: "#000",
        autoplay: 0, // 0 for no autoplay, any other postive number for play interval in (ms)
        shuffle: false, // set true to shuffle the picture order
        show: {effect: 'fade', duration: 300}, // effect params refer to jQuery UI
        hide: {effect: 'fade', duration: 300}, // try 'puff' or 'drop' for the effect arg
    }, options),               
    slides = this.find('li'),
    amount = slides.length,
    current = 0,
    theWindow = $(window),
    viewport = this;
    turnSlide = function(event) {
        var step = 1;
        if (event) {
            event.preventDefault();
            step = event.data.step;
        }
        if (settings.shuffle) 
            step = Math.floor(Math.random()*(amount - 1) + 1);

        $(slides[current]).hide(settings.hide);
        current = (((current + step) % amount) + amount) % amount;
        // must make displayable before detecting the dimension
        $(slides[current]).css({display: 'block', overflow: 'hidden'});
        resizeImg();
        $(slides[current]).css({display: 'none'});
        $(slides[current]).show(settings.show);
    },


    // set bg color
    this.css('background-color', settings.bgcolor);

    // set the next button
    this.find('.nav.next').click({step:1}, turnSlide);
    this.find('.nav.prev').click({step:-1}, turnSlide);

    // set autoplay interval 
    if (settings.autoplay > 0)
        setInterval(turnSlide, settings.autoplay);

    /*
     * handling bg images resize
     */
    function resizeImg() {

        // set width and height of the slider
        viewport.width(settings.width == null ? theWindow.width() : settings.width);
        viewport.height(settings.height == null ? theWindow.height() : settings.height);
        vieww = viewport.width();
        viewh = viewport.height();
        viewRatio = vieww / viewh;

        bgimg = $(slides[current]).find("img");      // the current visible image

        var doResize = function() {

            imgRatio = bgimg.width() / bgimg.height();

            if ((viewRatio < imgRatio && settings.mode == 'contain') || (viewRatio >= imgRatio &&     settings.mode == 'cover')) {

                bgimg.removeClass('maxh').addClass('maxw').css({
                    /* get new height after adjust above */
                    top: (viewh - vieww / imgRatio) / 2,
                    left: 0
                });
            } else {
                bgimg.removeClass('maxw').addClass('maxh').css({
                    /* get new width after adjust above */
                    top: 0,
                    left: (vieww - imgRatio * viewh) / 2
                });
            }
        };

        bgimg.get(0).complete ? doResize() : bgimg.load(doResize);
    }
    theWindow.resize(resizeImg).trigger('resize');

完成，这里的图像：在使用导航之前（滑块非常适合页面，但由于不适合滑块而裁剪了部分图像） http://i.stack.imgur.com/jbbpb.jpg

使用导航后返回第一张图片（一切正常......） http://i.stack.imgur.com/ScXTE.jpg

所以我认为导航过程中发生了一些事情，在加载滑块时没有发生（例如调整大小的函数......）

谢谢！

Answer 1

好的，几天后我找到了一个解决方案，不是完美的解决方案，但它有效。我只是在JS文件末尾添加theWindow.load(resizeImg).trigger('resize'); ... 更简单的解决方案可能是最好的。

如果您有更好的解决方案，请不要犹豫！

Juicyslider中的第一张图片不适合宽度页面

1 个答案: