Jquery幻燈片100％寬度

我有一個jquery幻燈片工作很好。但是，幻燈片的寬度由在<head> jQuery代碼控制，例如見Jquery幻燈片100％寬度

<script type="text/javascript"> 
$(document).ready(function(){ 
    var currentPosition = 0; 
    var slideWidth = 720; 
    var slides = $('.slide'); 
    var numberOfSlides = slides.length;

我需要做的是將寬度設置爲100％，我該怎麼辦呢？每次我使用％符號幻燈片停止工作？

乾杯，安迪

下面是完整的代碼：

<script type="text/javascript"> 
$(document).ready(function(){ 
var currentPosition = 0; var slideWidth = 720; var slides = $('.slide'); var numberOfSlides = slides.length; 
// Remove scrollbar in JS 
$('#slidesContainer').css('overflow', 'hidden'); 
// Wrap all .slides with #slideInner div 
slides 
.wrapAll('<div id="slideInner"></div>') 
// Float left to display horizontally, readjust .slides width 
.css({ 
    'float' : 'left', 
    'width' : slideWidth 
}); 
// Set #slideInner width equal to total width of all slides 
$('#slideInner').css('width', slideWidth * numberOfSlides); 
// Insert controls in the DOM 
$('#slideshow') 
.prepend('<span class="control" id="leftControl">Clicking moves left</span>') 
.append('<span class="control" id="rightControl">Clicking moves right</span>'); 
// Hide left arrow control on first load 
manageControls(currentPosition); 
// Create event listeners for .controls clicks 
$('.control') 
.bind('click', function(){ 
// Determine new position 
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1; 
// Hide/show controls 
manageControls(currentPosition); 
// Move slideInner using margin-left 
$('#slideInner').animate({ 
    'marginLeft' : slideWidth*(-currentPosition) 
}); 
}); 
// manageControls: Hides and Shows controls depending on currentPosition 
function manageControls(position){ 
// Hide left arrow if position is first slide 
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() } 
// Hide right arrow if position is last slide 
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() } 
} 
}); 
</script>

來源

2011-10-24 thornemeister

你試過' 「100％」'而不僅僅是'100％'？否則，我們真的需要看到更多的代碼，如果可能的話還有演示站點。 –

如果指定寬度爲百分比，請確保使用引號：'var slideWidth =「100％」;' – gilly3

感謝您的快速響應，但「100％」無法正常工作。我編輯了原始問題並添加了完整的代碼。 – thornemeister

試試這個：

<script type="text/javascript"> 
$(document).ready(function(){ 
var currentPosition = 0; 
var slideWidth = getInt($("body").css("width")); 
var slides = $('.slide'); 
var numberOfSlides = slides.length; 

function getInt(num) 
{ 
    if (isNaN(num)) { 
     return num.replace(/[^-0-9]/g,""); 
    } else { 
     return num; 
    } 
} 
</script>

雖然它不是一個完美的解決方案，它至少會設置寬度爲加載時的頁面寬度。如果您想在用戶調整瀏覽器窗口大小時修復slideWidth變量，則必須爲身體上的resize事件創建事件處理程序。

來源

2011-10-24 20:43:39 Crontab

完美，謝謝你的幫助！ :) – thornemeister

很高興我能幫忙。如果您認爲這是您的答案，您能否將其標記爲幫助Google員工退出？謝謝！ – Crontab

試試這個：

var slideWidth = document.body.offsetWidth;

來源

2011-10-24 20:52:38 MRR0GERS

Jquery幻燈片100％寬度

回答

相關問題