javascript - jquery滑块响应问题

Question

我是 jQuery 的初学者，我试图让滑块响应并且正在工作，但我有一些我想要修复的错误，首先当传递到下一张图片时，它有时会变成白色并且它不工作再有，第二次它开始变得越来越快。

有什么建议么？

.mascara
{ width: 100%; height: 100%;
 overflow: hidden;
}

.carrusel{ position: relative; width: 100%; height: 100%; }

 .carrusel li{ width:25%; height: 100%; float: left; background-repeat: no-repeat; background-position: center; background-size: cover; }

<script src="jquery-2.0.3.min.js"></script>
<script>

var cantidadFotos = $('.carrusel li').size();

var incremento =  $('.mascara').width();
var limite = (cantidadFotos-1) * incremento;
var velocidad = 550;

$('.carrusel').css('width', (cantidadFotos*100)+"%");
$('.carrusel li').css('width', incremento+"px");

var posX = 0;

 resize();

function resize()
{
 $(window).resize(function () {
    incremento =  $('.mascara').width();
    $('.carrusel li').css('width', incremento+"px");
    posX = -(incremento * imagenes);
    $('.carrusel').css('left', posX+"px");
 });

setInterval(function(){ nextFoto(); }, 3000);}
var imagenes = 0;
function nextFoto(){

    imagenes++;
    posX+= -incremento;

    if (posX<-limite){
        posX=0;
        imagenes = 0;
        $('.carrusel').css({ left: posX });
        }
   $('.carrusel').animate({ left: posX},350);
    // $('.carrusel').css({ left: posX});
    return false;
}
</script>

Answer 1

如果想在滑动的时候去掉空白页，改成这样：

在.carrusel

改变：

position: relative;

至：

position: absolute;

为了让它更快，改变：

setInterval(function () {
        nextFoto();
    }, 3000);

至

setInterval(function () {
        nextFoto();
    }, 1000);

根据您的需要进行更改以使其更快！

演示