Javascript基本滑动条与DIV类，而不是图像

Question

我如何使用div而不是IMAGES标签。我试过getElementsByTagName("div")，但它们在#slider-contentdiv中，所以我很难从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

直接使用JavaScript，最简单的方法可能是为您想要控制的div(即<div name="slider"></div>)添加名称，然后使用

sliderImages = slider.getElementsByName('slider'),