0

我在这里建立一个网站：argit.bounde.co.uk

我遵循了制作滑块的教程，它的工作原理是具有ul大宽度然后li's浮动。然后这一切都被 a divwhich has隐藏了overflow: hidden。然后让 jquery 动画margin-left = imgWidth

我网站的其余部分是流体宽度，所以显然我需要滑块跟随，否则它看起来有点傻。目前我已经li's用 jquery 给出了一个设置的宽度，然后将 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
})
};
4

3 回答 3

2

我已经链接到我编写的用于执行此操作的插件的小提琴。要求是父容器具有位置：相对，并且在较小程度上溢出：隐藏，并且在加载图像后调用它。随意获取代码并从中学习。

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% 的高度。在图像上，如果设置了一个大小属性，那么另一个会相应地调整大小。大小逻辑完成后。它只是使用绝对位置和边距使图像居中。

于 2013-04-09T21:20:58.650 回答
1

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

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

然后为这个类使用特定的 css 样式：

.jQuery li {
    /* some style */ 
}

如果设置了“jQuery”类，则设备支持 jQuery。

于 2013-04-09T20:56:05.830 回答
0

最简单的方法是不浮动面板（li）并将它们设置为包装 div 的 100% 宽度。然后，当用户导航时，将下一个面板以 100% 的边距定位到右侧，然后将其设置为 0 边距，同时将前一个面板设置为 -100% 的边距。当用户选择前一个面板时，执行相反的操作。我认为这种方法在较旧的 IE 中效果不佳，但我可能弄错了。

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

于 2013-04-09T20:56:50.287 回答