javascript - 如何制作自定义 javascript 轮播的控件

Question

我正在制作自定义的 javascript 轮播。我想为我的旋转木马制作控件。我一直在寻找答案，但没有找到。

这是我正在使用的代码

 <div class="container">
  <div class="row">
    <div class="col-lg-6 top-space text-center float">
      <h3 class="heading">Image Slider</h3>
      <hr>
    </div>
    <div class="col-lg-6 float">
      <img src="img/slider1.jpg" class="img-responsive" id="mainImage">
    </div>
  </div>
</div>

javascript代码:

 var imagesArray = ["img/slider2.jpg","img/slider3.jpg","img/slider4.jpg"];
 var index = 0 ;

 function imageSlider(){

   var getImagePath = document.getElementById("mainImage");
   getImagePath.setAttribute("src",imagesArray[index]);
   index++;

   if(index >= imagesArray.length){
     index = 0;
   }
}

setInterval(imageSlider,4000);

这是图片:

Answer 1

下面是一个例子:

function imageSlider(){
  this.prev = function(){
    if(--this.index < 0) this.index = this.imagesArray.length - 1;
    this.start()
  };

  this.next = function(){
    if(++this.index >= this.imagesArray.length) this.index = 0;
    this.start()
  };

  this.start = function(){
    var getImagePath = document.getElementById("mainImage");
    getImagePath.setAttribute("src", this.imagesArray[this.index]);

    this.timeout && clearTimeout(this.timeout);
    this.timeout = setTimeout(this.next.bind(this),3000)	
  };
}

var myCarousel = new imageSlider();
myCarousel.imagesArray = ["http://i.stack.imgur.com/d5vO7.jpg?s=128&g=1", "http://i.stack.imgur.com/GNgxX.png?s=128&g=1","http://i.stack.imgur.com/kpQYd.png?s=128&g=1"];
myCarousel.index = 0;
myCarousel.start()

<div class="container">
  <div class="row">
    <div class="col-lg-6 float">
      <img src="img/slider1.jpg" class="img-responsive" id="mainImage">
      <p><button onclick="myCarousel.prev()">Prev</button>
      <button onclick="myCarousel.next()">Next</button></p>
    </div>
  </div>
</div>