Javascript 流体宽度滑块

我正在这里创建一个网站：

我遵循了一个制作滑块的教程，它的原理是让

ul

有一个大宽度，然后

li的

浮动。然后，这一切都被一个

div

隐藏，该div具有

溢出：hidden

。然后使用jquery设置

marginleft=imgWidth

我的网站的其余部分是流体宽度，所以很明显，我需要滑块跟随其他方面，它看起来有点傻。目前，我已经用jquery为

li的
设置了一个宽度，然后将img设置为100%。这个解决方案还可以，但是当设备不支持jQuery时就会崩溃，所以我更喜欢一个更健壮的方法。我无法将
ul
设置为100%，因为这样图像就不再是一行，而是简单地堆叠在彼此下面

有人能想出一个办法让我做到这一点吗

全滑块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
})
};

您可以检测设备是否支持jQuery：

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

然后在此类中使用特定的css样式：

.jQuery li {
    /* some style */ 
}

如果设置了类“jQuery”，则设备支持jQuery。
您可以检测设备是否支持jQuery：

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

然后在此类中使用特定的css样式：

.jQuery li {
    /* some style */ 
}

如果设置了类“jQuery”，则设备支持jQuery。
最简单的方法是不浮动面板（li），并将其设置为包装div的100%宽度。然后，当用户导航时，将下一个面板放置在视图右侧的100%边距处，然后将其动画设置为0边距，同时将上一个面板动画设置为-100%边距。当用户选择上一个面板时，执行相反的操作。我认为这种方法在旧版IE中效果不好，但我可能弄错了

或者，您可以绑定到窗口调整大小事件（最好限制事件）并调整面板和任何保存的宽度/高度的大小。最简单的方法是不浮动面板（li），并将其设置为环绕div的100%宽度。然后，当用户导航时，将下一个面板以100%边距放置在视图之外的右侧，然后将其动画设置为0边距，同时将上一个面板动画设置为-100%边距。当用户选择上一个面板时，执行相反的操作。我认为这种方法在旧版IE中效果不好，但我可能弄错了

或者，您可以绑定到窗口大小调整事件（最好限制事件），调整面板大小和任何保存的宽度/高度
我已经链接到一个插件的小提琴，我编写了这个插件。要求父容器具有position:relative，并在较小程度上具有overflow:hidden，并且在加载图像后调用它。请随意使用代码并从中学习


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' : ''
                });
            }
        }
    });
};

$.fn.fitToParent=函数（类型，对齐）{
类型=类型类型的类型==“未定义”？“适合”：类型；
align=typeof align==“未定义”？“中心”：对齐；
返回此。每个（函数（）{
var$this=$（this）；
var$parent=$（this.parent（）；
如果（$this.is（'img'））{
$this.css({
'位置'：'绝对'，
“宽度”：“100%”，
“高度”：“自动”
}).css（{//允许调整高度
“左”：“，
“左边距”：“，
“顶部”：对齐==“中心”？“50%”:（对齐==“左侧”？“0px”：“”），
“底部”：“，
“页边距顶部”：对齐==“中心”？（$this.height（）/2）+“px”：”
});
//根据尺寸类型按高度确定尺寸
如果（$this.height（）>$parent.height（）&&type=='fit'）| |（$this.height（）<$parent.height（）&&type=='fill'））{
$this.css({
“宽度”：“自动”，
“高度”：“100%”
}).css（{//允许宽度调整
“顶部”：“，
“页边空白处”：“，
“左”：align=='center'？'50%：（align=='left'？'0px'：''），
“right”：align==“right”？“0px”：”，
“左边距”：align==“center”？（$this.width（）/2）+“px”：”
});
}
如果（类型==‘无’）{
$this.css({
“宽度”：“，
“高度”：”
}).css（{//允许宽度调整
"最高":"50%",，
“底部”：“，
“页边距顶部”：（$this.height（）/2）+“px”，
“左”：align=='center'？'50%：（align=='left'？'0px'：''），
“right”：align==“right”？“0px”：”，
“左边距”：align==“center”？（$this.width（）/2）+“px”：”
});
}
}
});
};

为了解释逻辑，它所做的只是将宽度设置为100%，并检查其高度是否更大，如果不是，则宽度100%可以。如果没有，则将其切换为100%高度。在图像上，如果设置了一个“大小”属性，则另一个属性会相应调整大小。完成大小逻辑后。它只是使用绝对位置和边距将图像居中。
我已经链接到一个我编程的插件，可以实现这一点。要求父容器具有position:relative，并在较小程度上具有overflow:hidden，并且在加载图像后调用它。请随意使用代码并从中学习


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' : ''
                });
            }
        }
    });
};

$.fn.fitToParent=函数（类型，对齐）{
类型=类型类型的类型==“未定义”？“适合”：类型；
align=typeof align==“未定义”？“中心”：对齐；
返回此。每个（函数（）{
var$this=$（this）；
var$parent=$（this.parent（）；
如果（$this.is（'img'））{
$this.css({
'位置'：'绝对'，
“宽度”：“100%”，
“高度”：“自动”
}).css（{//