자바 스크립트에 캐 러셀 만들기

자바 스크립트와 CSS를 통해 간단한 캐 러셀과 같은 아이콘 목록을 만들려고합니다. 그러나 그것은 내 방식으로 작동하지 않는 것 같습니다. 아무도 도와 줄 수 있습니까? 이 내 코드자바 스크립트에 캐 러셀 만들기

JS 
    var container = document.getElementById('container'); 
    var foo = []; 
    for (var i = 0; i < 5; i++) { 
     foo[i] = document.createElement('div'); 
     foo[i].id = 'SingleElement'; 
     foo[i].innerHTML = '<img alt="" src="http://www.placehold.it/300x200"/>'; 
     container.appendChild(foo[i]); 
    } 

    HTML 
    <div id="container"></div> 

    and CSS 
    #container { 
     overflow-x:scroll; 
     white-space: nowrap; 
     float:left; 
    } 
    #SingleElement { 
     float:left; 
     white-space: nowrap; 
    } 
    img { 
     display:inline-block; 
    }

및 fiddle example입니다. 감사합니다.

출처

2013-10-21 Mano

모든 컨테이너에 동일한 "id"값을 지정하지 않아야합니다. 그것 이외에, 그것은 잘 작동하는 것 같습니다. 너는 그걸 어떻게 기대 했는가? – Pointy

이 질문의 답은 화제가 되었기 때문에 논평의 대상이 아닙니다 ... http : //codereview.stackexchange.com/ –

에 있어야합니다. 어떤 식 으로든 애니메이션을 적용 하시겠습니까? 제공 한 코드는 5 개의 자리 표시 자만 표시합니다. – ForOhFor

나는 이것이 실제로 회전 장치가 아닌 다른 의견 제시 자들에게 동의하며 기존 라이브러리 중 하나를주의해야합니다. 당신은 단지 5 개 이미지 스크롤 사업부를 표시하려면 이보고 :

http://jsfiddle.net/nrybQ/

#container { 
    overflow-x:scroll; 
    white-space: nowrap; 
    float:left; 
    width:100%; 
} 

var container = document.getElementById('container'); 
var foo = []; 
for (var i = 0; i < 5; i++) { 
    foo[i] = document.createElement('span'); 
    foo[i].innerHTML = '<img alt="" src="http://www.placehold.it/300x200"/>'; 
     container.appendChild(foo[i]); 
}

일부 힌트 : 는 - 여러 요소 에 대한 ID를 사용하지 않는 - 스팬하지 사업부를 사용 -supply 컨테이너의 너비

출처

2013-10-21 14:11:00 mainguy

내가 코멘트를 작성하려고했지만 너무 긴 것입니다 ...

코드 아무 문제가 없다, 그것은 완벽하게 작동하고. JS를 실행 한 후 소스 코드를 살펴 본다.

<body> 
<div id="container"> 
<div id="SingleElement"> 
<img src="http://www.placehold.it/300x200" alt=""> 
</div> 
<div id="SingleElement"> 
<img src="http://www.placehold.it/300x200" alt=""> 
</div> 
....... 
<div id="SingleElement"> 
<img src="http://www.placehold.it/300x200" alt=""> 
</div> 
</div>

과 JS 실행 한 후 코드에 대한 CSS :

#container { 
    float: left; 
    overflow-x: scroll; 
    white-space: nowrap; 
} 

#SingleElement { 
    float: left; 
    white-space: nowrap; 
} 


img { 
    display: inline-block; 
}

결론 :

후 실행 JS 만 (다른 옆에 하나를 의미 이미지 float:left이있을 것이다 화면이 충분히 넓 으면) CSS, JS를 사용하여 요소를 숨기고 회전, 다음 및 이전 버튼을 만들 필요가 있습니다.

가장 큰 권장 사항은 JS 라이브러리를 사용하여 사용자 정의하는 것입니다.

즉 =

http://sorgalla.com/projects/jcarousel/

(인터넷에 그들 중 많은이 있습니다).

출처

2013-10-21 14:03:02 jcho360

자바 스크립트에 캐 러셀 만들기

답변

관련 문제