자바 스크립트 슬라이더가 작동하지 않습니다.

여러 개의 상자가있는 작은 슬라이더를 만들려고합니다. 나는 8을 가지고 있고 (예를 들면) 나는 한 번에 4를 표시해야한다. 그것들은 제가 올리려는 작은 배너와 같습니다. 여기 자바 스크립트 슬라이더가 작동하지 않습니다.

지금까지 내 코드입니다 :

HTML :

<div id="boxes"> 
    <div class="current">1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div class='box hide'>5</div> 
    <div class='box hide'>6</div> 
    ... 
</div>

CSS :

#boxes div{ 
    width:400px; 
    height:60px; 
    background-color: red; 
    color:white; 
    margin: 20px 0; 
} 

.hide{display:none;}

자바 스크립트 : 나는 그것을 같은 것을 할 것

$(function(){ 
    setInterval(show_boxes, 2000); 
}) 

function show_boxes(){ 

    var curBox = $("#boxes div.current"); 
    var nxtBox = curBox.next(); 

    if(nxtBox.length == 0){ 
     nxtBox = $("#boxes div:first"); 
    } 

    curBox.removeClass('current').addClass('hide'); 
    nxtBox.addClass('current').removeClass('hide'); 

}

출처

2013-07-09 Stefan C

이것은 혼란 스럽습니다. jsFiddle을 제공 할 수있는 방법은 무엇입니까? 당신이 성취하고자하는 것이나 틀린 것은 진짜 아이디어가 아닙니다. –

도움이 필요하면 http://jsfiddle.net/haapN/ –

을 확인하십시오. 'nxtBox'가 변경하려는 다섯 번째 상자 대신 두 번째 상자라고 생각한 적이 있습니까? 또한 8 번째 상자를 지나친 후 어떤 일이 발생하는지 생각해보십시오. 이 문제를 해결하기위한 출발점에 대한 제 제안이 될 것입니다. –

매번 맨 위 상자를 목록의 끝으로 이동합니다. 이렇게하면 멋진 무한 루프가 생기고 다음에 어떤 상자가 보이는지 숨길 수 있는지 복잡한 체크를 할 필요가 없습니다.

데모는 : 그것은 내 코드에 필요하지 않는 한 http://jsfiddle.net/XzmAT/2/

또한 나는 current 클래스를 제거했다.

출처

2013-07-09 19:10:56 Pevara

당신은 화려한 PeterVR입니다. 감사! –

한 가지 문제가 있습니다. 나는 4 개의 상자를 항상 표시해야하고 나머지는 위로 움직여야합니다. 너에게 나에게 힌트를 줄 수 있니? –

4 개의 박스가 바이올린에 표시됩니다. 슬라이드 업으로 정확히 무엇을 의미합니까? – Pevara

자바 스크립트 슬라이더가 작동하지 않습니다.

답변

관련 문제