流體寬度滑塊

Question

我在這里制作網站： argit.bounde.co.uk

我遵循了有關制作滑塊的教程，並且該教程的原理是先使ul變大，然后使li's浮動。 然后，所有這些都由一個已overflow: hidden的div overflow: hidden 。 然后有jquery動畫margin-left = imgWidth

我網站的其余部分是流體寬度，因此很明顯，我需要滑塊沿其他方向跟隨，看起來有點傻。 目前，我已經給li's設置了jquery的寬度，然后將img設置為100％。 這種解決方案是可以的，但是當設備不支持jQuery時會崩潰，所以我希望使用更可靠的方法。 我無法將ul設置為100％，因為圖像不再排成一行，它們彼此簡單堆疊

誰能想到我可以實現這一目標的方法？

完整的jQuery jQuery在這里：

var current = 1;

function slider () {
var sliderUl = $('div#slider ul'),
    imgs = sliderUl.find('img'),
    imgWidth = imgs.width(), 
    imgLength = imgs.length, 
    totalImgsWidth = imgLength * imgWidth; 

var direction = $(this).data('dir'),
    loc = imgWidth;

if( direction == 'next') {
    ++current;
} else {
    --current;
}

if( current === 0) {
    current = imgLength;
    loc = totalImgsWidth - imgWidth;
    direction = 'next';
} else if ( current - 1 === imgLength ) {
    current = 1;
    loc = 0;
}


transition(sliderUl, loc, direction);
};

function transition( container, loc, direction ) {
var ease;
var unit;

if (direction && loc !== 0) {
    unit = (direction === 'next') ? '-=' : '+=';
}

container.animate({
    'margin-left': unit ? (unit + loc) : loc
})
};

Answer 1

我已經鏈接到我為此編寫的插件的小提琴。 要求父容器具有位置：相對，並且在較小程度上具有溢出：隱藏，並且在加載圖像后調用它。 隨意獲取代碼並從中學習。

http://jsfiddle.net/dhQk/35K8X/7/show/

JS

$.fn.fitToParent = function (type, align) {
    type = typeof type === 'undefined' ? 'fit' : type;
    align = typeof align === 'undefined' ? 'center' : align;
    return this.each(function () {
        var $this = $(this);
        var $parent = $(this).parent();
        if ($this.is('img')) {
            $this.css({
                'position': 'absolute',
                    'width': '100%',
                    'height': 'auto'
            }).css({ //Allow Height to adjust
                'left': '',
                    'margin-left': '',
                    'top': align == 'center' ? '50%' : (align == 'left' ? '0px' : ''),
                    'bottom': '',
                    'margin-top': align == 'center' ? (-$this.height() / 2) + 'px' : ''
            });
            //Size by height depending on sizing type
            if (($this.height() > $parent.height() && type === 'fit') || ($this.height() < $parent.height() && type === 'fill')) {
                $this.css({
                    'width': 'auto',
                        'height': '100%'
                }).css({ //Allow Width to adjust
                    'top': '',
                        'margin-top': '',
                        'left': align == 'center' ? '50%' : (align == 'left' ? '0px' : ''),
                        'right': align == 'right' ? '0px' : '',
                        'margin-left': align == 'center' ? (-$this.width() / 2) + 'px' : ''
                });
            }
            if (type === 'none') {
                $this.css({
                    'width': '',
                        'height': ''
                }).css({ //Allow Width to adjust
                    'top': '50%',
                        'bottom': '',
                        'margin-top': (-$this.height() / 2) + 'px',
                        'left': align == 'center' ? '50%' : (align == 'left' ? '0px' : ''),
                        'right': align == 'right' ? '0px' : '',
                        'margin-left': align == 'center' ? (-$this.width() / 2) + 'px' : ''
                });
            }
        }
    });
};

為了解釋邏輯，它所做的只是將寬度設置為100％，並檢查它的高度是否更大，如果不是，那么寬度100％就可以了。 如果不是，則將其切換為高度100％。 在圖像上，如果設置了一個大小屬性，則另一個將相應地調整大小。 大小邏輯完成之后。 它只使用絕對位置和邊距位置將圖像居中。

Answer 2

您可以檢測到設備是否支持jQuery：

$('html').addClass('jQuery');

然后為此類使用特定的CSS樣式：

.jQuery li {
    /* some style */ 
}

如果設置了“ jQuery”類，則設備支持jQuery。

Answer 3

最簡單的方法是不浮動面板（li's）並將其設置為環繞div的100％寬度。 然后，當用戶導航時，將下一個面板以100％的邊距向右移出視圖，然后將其動畫化為0邊距，同時將前一個面板動畫化為-100％邊距。 當用戶選擇上一個面板時，請執行相反的操作。 我認為這種方法在較舊的IE中效果不佳，但我可能會誤會。

或者，您可以綁定到窗口調整大小事件（最好限制事件），並調整面板大小和任何保存的寬度/高度