使用DIV類而不是圖像的Javascript基本滑塊

Question

如何使用div而不是IMAGES標籤。我試過getElementsByTagName("div")，但他們在#slider-content div。所以我無法從slide1 - 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

使用直JavaScript中，最簡單的方法是有可能的名稱添加到要控制的div（即<div name="slider"></div>）和然後使用

sliderImages = slider.getElementsByName('slider'), 

您的其他代碼應該可以正常工作。