流體寬度滑塊

我按照上使滑塊的教程和它的作品上有一個大寬度的ul，然後漂浮在li's的原則。然後全部被div掩蓋，其具有overflow: hidden。然後有jQuery的動畫margin-left = imgWidth

我的網站的其餘部分是流體寬度，所以顯然我需要滑塊跟隨其他明智看起來有點愚蠢。目前我已經用jquery給li's設置了一個寬度，然後將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 
}) 
};

來源

2013-04-09 rbyrne

你看過[FlexSlider 2]（http://flexslider.woothemes.com/）嗎？ – Mottie 2013-04-09 20:50:20

我是jQuery的新手，希望儘可能地自己編寫代碼，以便我能夠很好的理解，我不想因爲依賴插件而能夠創造性。但是，謝謝 – rbyrne 2013-04-09 20:51:39

您可以檢測確實設備支持的jQuery：

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

然後用特定的CSS樣式這個類：

.jQuery li { 
    /* some style */ 
}

如果類'jQuery'設置然後設備支持jQuery。

來源

2013-04-09 20:56:05 b0zar

最簡單的方法是不浮動您的面板（li's）並將它們設置爲100％包裝div的寬度。然後，當用戶導航時，將下一個面板以100％的邊距定位到右側，然後在將前一個面板設置爲-100％的邊距時爲其設置0邊框。當用戶選擇前一個面板時做相反的事情。我不認爲這種方法在較老的IE中運行良好，但我可能會誤解。

或者，您可以綁定到窗口resize事件（這將是最好的油門事件），並調整面板和任何保存寬度/高度

來源

2013-04-09 20:56:50 Mottie

我掛一個插件程序我的小提琴這是做到這一點。要求是父容器的位置是：relative，在較小的程度上overflow：hidden，並且在加載圖像後調用它。隨意採取代碼並從中學習。

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

$.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-09 21:20:58

流體寬度滑塊

回答

相關問題