Question

我正在测试一个jquery全宽滑块，代码如下：

var width = $(window).width();
console.log('width 1 = '+width);
var width = window.innerWidth;
console.log('width 2 = '+width);
var width = document.body.parentNode.clientWidth;
console.log('width 3 = '+width);

var animationSpeed = 1000;
var pause = 2000;
var currentSlide = 1;

//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);

var interval;

function startSlider() {
    interval = setInterval(function() {
        $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
            if (++currentSlide === $slides.length) {
                currentSlide = 1;
                $slideContainer.css('margin-left', 0);
            }
        });
    }, pause);
}
function pauseSlider() {
    clearInterval(interval);
}

$slideContainer
    .on('mouseenter', pauseSlider)
    .on('mouseleave', startSlider);

startSlider();

html是：

<div id="slider">
  <ul class="slides">
    <li class="slide slide1"><img src="<?php echo base_url('public/img/carousel/carousel-1.jpg'); ?>" alt=""></li>
    <li class="slide slide2"><img src="<?php echo base_url('public/img/carousel/carousel-2.jpg'); ?>"</li>
    <li class="slide slide3"><img src="<?php echo base_url('public/img/carousel/carousel-3.jpg'); ?>"</li>
    <li class="slide slide4"><img src="<?php echo base_url('public/img/carousel/carousel-4.jpg'); ?>"</li>
    <li class="slide slide5"><img src="<?php echo base_url('public/img/carousel/carousel-5.jpg'); ?>"</li>
    <li class="slide slide6"><img src="<?php echo base_url('public/img/carousel/carousel-1.jpg'); ?>"</li>
  </ul>
</div>

除视口宽度问题外，此方法正常。垂直滚动条存在问题，如果宽度错误，显然滑块横向移动的量不正确。我正在使用控制台日志检查'width'（参见上面的代码），'width 1'和'width 3'给出了相同的宽度，比如Waterfox。但是，在Chrome和Firefox中，它太小了17px（垂直滚动条的宽度）。但是，如果我使用“宽度2”，它可以在Chrome和Firefox中使用，那么对于Waterfox而言，这个版本对于17px来说太大了。我发现了很多关于这个的帖子，但他们要么提出我已经在做的事情但是没有工作或者没有解决。任何人都可以建议一个简单的解决方案吗？

jquery滑块视口宽度

0 个答案: