jquery 슬라이더 반응 문제

-1

저는 jQuery의 초보자입니다. 반응 슬라이더를 만들기 위해 노력하고 있었지만 작동하고 있지만 몇 가지 버그를 수정하고 싶습니다. 우선 다음 사진을 몇 번 통과하면됩니다. 흰색으로 바뀌면 더 이상 작동하지 않으며 두 번째로 빨라지면서 빨라집니다.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>

출처

2014-07-08 user3308331

안녕하세요 당신은 바이올린을 만들 수 있습니까? 또한 게시물에서 질문을 편집하려고 시도하고 주석이 아닌 코드를 읽으므로 코드를 잘 읽을 수 있습니다. 당신은 피들을 만들 수 있습니다 http://jsfiddle.net/ 여기 – bumbumpaw

http://jsfiddle.net/mgHn4/ 코드는 여기 !!! 도움이 필요해. – user3308331

이 변경 :

position: relative;

하려면 :

변경

.carrusel에서

position: absolute;

그리고 m 빨리를 만들기 위해 필요에 따라

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

변경

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

사람 : 변화, 더 빨리 아케!

Demo

출처

2014-07-08 01:28:39 imbondbaby

jquery 슬라이더 반응 문제

답변

관련 문제