javascript - 带有 DIV 类而不是图像的 Javascript 基本滑块

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'),

您的其余代码应该可以使用它。