Question

我已经使用var slideWidth = 420;来指定滑块宽度，然后使用$('#slideInner').css('width', slideWidth * numberOfSlides);来计算所有滑块的宽度很长时间并且它的像素工作正常

问题

我需要使用％，而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/

jquery Slider - 如何计算百分比

1 个答案: