2014-04-17 3 views
0

웹 페이지의 슬라이더에 대해 아주 잘 작동하는 jquery 코드가 있습니다. 그것의 기능은 모든 작동 navigations.The 문제와 함께 나는 자동으로 그것을 얻을 수 없습니다. 이 코드를 수정하거나 자동 재생되도록하려면 어떻게 추가 할 수 있는지 알려주세요.jquery 슬라이더를 자동 재생하는 방법은 무엇입니까?

$(document).ready(function(){ 
$('.sp').first().addClass('active'); 
$('.sp').hide();  
$('.active').show(); 

$('#button-next').click(function(){ 

$('.active').removeClass('active').addClass('oldActive');  
       if ($('.oldActive').is(':last-child')) { 
    $('.sp').first().addClass('active'); 
    } 
    else{ 
    $('.oldActive').next().addClass('active'); 
    } 
$('.oldActive').removeClass('oldActive'); 
$('.sp').fadeOut(); 
$('.active').fadeIn(); 


}); 

    $('#button-previous').click(function(){ 
$('.active').removeClass('active').addClass('oldActive');  
     if ($('.oldActive').is(':first-child')) { 
    $('.sp').last().addClass('active'); 
    } 
     else{ 
$('.oldActive').prev().addClass('active'); 
     } 
$('.oldActive').removeClass('oldActive'); 
$('.sp').fadeOut(); 
$('.active').fadeIn(); 
}); 


}); 
+0

코드에서 setInterval을 사용합니다. – Mike

+0

나는 그것을 사용하는 방법을 모른다. 예를 들어 주시겠습니까? – Vanjul

답변

0

나는 다음 및 이전 슬라이드를 얻을 기능을하도록 권합니다. 이렇게하면 다음 기능에 대한 시간 제한을 쉽게 설정할 수 있습니다. 아래 코드는 테스트되지 않았지만 응용 프로그램에서 사용할 수있는 것과 비슷해야합니다.

$(document).ready(function(){ 
    $('.sp').first().addClass('active'); 
    $('.sp').hide();  
    $('.active').show(); 

    $('#button-next').click(function(){ 
     next(); 
    }); 

    $('#button-previous').click(function(){ 
     previous(); 
    }); 

    setTimeout(next,5000); 
}); 

function next() { 
    $('.active').removeClass('active').addClass('oldActive');  
    if ($('.oldActive').is(':last-child')) { 
     $('.sp').first().addClass('active'); 
    } 
    else{ 
     $('.oldActive').next().addClass('active'); 
    } 
    $('.oldActive').removeClass('oldActive'); 
    $('.sp').fadeOut(); 
    $('.active').fadeIn(); 
} 

function previous() { 
    $('.active').removeClass('active').addClass('oldActive');  
    if ($('.oldActive').is(':first-child')) { 
     $('.sp').last().addClass('active'); 
    } 
    else{ 
     $('.oldActive').prev().addClass('active'); 
    } 
    $('.oldActive').removeClass('oldActive'); 
    $('.sp').fadeOut(); 
    $('.active').fadeIn(); 
} 
+0

이 접근법은 결코 내 마음을 넘어 섰다! 그러나 정확하고 요점! 일 했어! 고맙습니다 :) – Vanjul

0

귀하의 질문에 답변을하지 못할 수도 있지만,이 사이트는 귀하의 직업을 더 쉽게 만듭니다. 두 개의 jquery 파일 만 포함시켜야하며 속성을 변경하면 다양한 유형의 이미지 슬라이드를 만들 수 있습니다. 자세한 내용은 여기 읽기

: http://www.slidesjs.com/

관련 문제