Javascript 이미지 대신 DIV 클래스가있는 기본 슬라이더

Question

IMAGES 태그 대신 div를 어떻게 사용합니까? 내가 getElementsByTagName("div")을 시도했지만 #slider-content div에 있습니다. 그래서 나는 slide1 slide2-div 클래스에서 그들을 가져 오는 데 어려움을 겪고있다. 감사.

window.onload = function() { 


    function e(eel) { 
return document.getElementById(eel); 
    } 

    function t(tel) { 
return document.getElementsByTagName(tel); 
    } 

    // SLIDER 
    var slider = e('slider'), 
     sliderImages = slider.getElementsByTagName('img'), 
     noOfImages = sliderImages.length, 
     wheee, n = 0, 
     sliderContent = e('slider-content'), 
     move, 
     imgWidth = (100/noOfImages) + "%"; 

    function sliderInit() { 
    sliderContent.style.width = (noOfImages * 100) + "%"; 
    for (var i = 0; i < noOfImages; i++) { 
    sliderImages[i].style.width = imgWidth; 
} 
    } 

    wheee = { 
slide: function() { 
     move = setInterval(function() { 
     if (n < (noOfImages-1)) n++; 
     else n = 0; 
     sliderContent.style.marginLeft = "-"+n+"00%"; 
    }, 3000); 
}, 

stop: function() { 
    window.clearInterval(move); 
} 
    } 

    wheee.slide(); 
    sliderInit(); 

    sliderContent.onmouseover = wheee.stop; 
    sliderContent.onmouseout = wheee.slide; 
    } 

HTML :

<div id="slider"> 
    <div id="slider-content"> 

     <div class="slide1">This is slide one</div><!-- slide one --> 
     <div class="slide2">This is slide two</div><!-- slide one --> 
     <div class="slide3">This is slide three</div><!-- slide one --> 

    </div><!-- slide content --> 
</div><!-- slider --> 

CSS : 바로 자바 스크립트를 사용

#slider-content{ 
-webkit-transition:all 1s ease-in-out; 
-moz-transition:all 1s ease-in-out; 
    -ms-transition:all 1s ease-in-out; 
    -o-transition:all 1s ease-in-out; 
    transition:all 1s ease-in-out; 
    } 
    .slide1{ 
background: #ff143f; 
    } 
    .slide2{ 
background: #424242; 
    } 
    .slide3{ 
background: #ff00d2; 
    } 

Answer 1

, 가장 쉬운 방법은 당신이 제어 할 div의에 이름을 추가 할 가능성이 높다 (예 : <div name="slider"></div>)을하고 그 다음 사용하십시오

sliderImages = slider.getElementsByName('slider'), 

나머지 코드는 그걸로 작동합니다.