javascript - jquery Slider - 如何计算百分比

Question

我使用 var slideWidth = 420; 指定 slider 宽度，然后使用 $('#slideInner').css('width', slideWidth * numberOfSlides); 长时间计算所有 slider 的宽度并且它可以很好地处理像素

问题

我需要使用 % 而 Jquery 似乎不理解它。

// slider
   var currentPosition = 0;
   var slideWidth = 420; // Use quotes('') for %  
   var slides = $('.slide'); // for each image
   var numberOfSlides = 4; // slides.length: show all images 

   // Remove scrollbar in JS 
   $('.slidesContainer').css('overflow', 'hidden');

   // Wrap all .slides with #slideInner div

   slides.wrapAll('<div id="slideInner"></div>').css({'float' : 'left','width' : slideWidth});

   // Float left to display horizontally, readjust .slides width
   /* 
   Set #slideInner width equal to total width of all slides
   #slideInner wraps all of our slides that has a width equal to total width of all .slide div.

   Problem: It needs a fix variable to calculate width    

   */

    $('#slideInner').css('width', slideWidth * numberOfSlides);  

Answer 1

尝试这样的事情:

// slider
var currentPosition = 0;
var slideWidthPct = 80; // this is a percent (between 0 and 100)
var slides = $('.slide'); // for each image
var numberOfSlides = Math.min(4, slides.length); // slides.length: show all images 
var singleSlideWidth = slideWidthPct / numberOfSlides;

// Remove scrollbar in JS 
$('.slidesContainer').css('overflow', 'hidden');

// Wrap all .slides with #slideInner div

slides.wrapAll('<div id="slideInner"></div>').css({'float' : 'left','width' : "" + singleSlideWidth + "%"});

// Float left to display horizontally, readjust .slides width
$('#slideInner').css('width', "" + slideWidthPct + "%");  

基于您的代码的工作示例:http://jsfiddle.net/7B8Bb/3/